#jquery notification popup example | Explore Tumblr posts and blogs

globalmediacampaign · 4 years ago

Text

PHP CRUD Application – Portfolio Piece

I am super pleased to share that I have completed and uploaded my first (that I can share at least) personal portfolio piece written in PHP to a subdomain on my personal hosting server located at walk.openlamp.tech. Over the better part of the last year, I have developed a custom reporting dashboard written in PHP for my (current) employer, but do not share any of that work as it is proprietary and not owned by me. However, for a personal project, I can share far and wide. In this post, I provide a brief overview of my simple (in theory at least) application/site, built on the LAMP stack using the MVC (Model-View-Controller) design pattern in core PHP along with Bootstrap 4, jQuery, and MySQL. Image by Tomislav Kaučić from Pixabay Self-Promotion: If you enjoy the content written here, by all means, share this blog and your favorite post(s) with others who may benefit from or like it as well. Since coffee is my favorite drink, you can even buy me one if you would like! Although I will provide some context in this post, its main purpose is to bring awareness to my skill set in Back-end web development as I learn and grow in this area, with the goal to move into more of this type of role. Expect several follow-up posts containing more details on the application code, design, and implementation itself for this particular portfolio project located at walk.openlamp.tech. I initially set out to create a CRUD site/application to store all the data from the many walks I take as I work towards a healthier weight and lifestyle. Site and Project Navigation The ‘Walking Stats Dashboard’ is accessible from the main navigation menu through the ‘Projects’ drop-down: Using Bootstrap 4 navbar dropdown Clicking ‘Walking Stats Dashboard’ from the drop-down, navigates to the ‘All Walks’ page, which displays a jQuery Datatable of information. Four important distinctions in this image are: The ‘Log In’ choice in the navigation menu Disabled ‘Add A Walk’ button Disabled ‘Edit’ button for each row in the table Disabled ‘Delete’ button for each row in the table (Note: The ‘Add A Walk’, ‘Edit’, and ‘Delete’ buttons are functional only if a user is authenticated and logged in.) User Log In and Authentication By clicking the Log In choice from the navigation menu, this simple log in screen is displayed, allowing a user to log in: Login screen Submitting invalid credentials prompts the user with a validation error: Displaying validation error for failed login attempt. Reading and Displaying Data Once logged in and redirected back to the ‘All Walks’ page, we can see that the ‘Add A Walk’, ‘Edit’, and ‘Delete’ buttons are now enabled. Additionally, the ‘Log In’ choice in the navigation menu has been changed to ‘Log Out’: Add A Walk, Edit, and Delete buttons are enabled since an authenticated user is logged in. Create a row of data In order to create a new row of data, we click the ‘Add A Walk’ button, and use this displayed form: Using HTML forms to create a new Walk row of data in the table. There is custom data validation checking on the back-end in PHP prior to any record being submitted to the MySQL database for processing. When values are unacceptable, the user is prompted with all applicable errors. In the example below, all of the input form fields were left blank, resulting in errors returned – and displayed – for each field upon submitting the form: Using PHP validation handling to provide meaningful error messages in Bootstrap 4 modal… Once any validation errors are corrected, the data is added to the MySQL database and the user is redirected back to the ‘All Walks’ page. Update a row of data We can easily edit a particular row’s information by simply clicking that rows’ ‘Edit’ button, which displays the relevant data in a Bootstrap 4 Modal as shown in the following screen-shot: Using Bootstrap 4 Modals for editing a row’s data… Again, there is data validation checking on the Back-end in PHP. However, any errors are propagated through jQuery using AJAX to the form on the front-end without the need for a page refresh: Using jQuery ajax validation with Bootstrap 4 Modals for editing and validation errors. Just as is with creating a new row of data, when any validation errors are corrected, the edited row of data is then updated in the MySQL database via clicking the ‘Update’ button. Upon success, the user is informed by a message in the Bootstrap 4 modal: Display message for a successful update. Delete a row of data Initially, I set out to not include any Delete functionality into this portfolio piece. However, the more I thought about it, I came to conclude that I could not call this project a legit CRUD application without the ability to delete a row. Clicking on any rows’ ‘Delete’ button displays this Bootstrap 4 modal popup, with the date of the row to be removed along with ‘Cancel’ and ‘Confirm Delete’ buttons: Bootstrap 4 modal popup for delete information. Clicking the ‘Confirm Delete’ button executes an AJAX script, deleting the row of data from the MySQL Database. A follow-up confirmation message is displayed as well once the Delete is completed: Delete confirmation message for successful delete. Filtering and pagination Search filtering and pagination are provided out of the box by the jQuery Datatable plugin by means of the ‘Search’ text box located on the top right of the Datatable and the pagination choices on the bottom right. Both of these features are extremely useful and require very little jQuery code to activate: Search filtering and pagination provided out of the box by jQuery Datatable plugin Future Features I’m planning to add more features to this project in the near future, including analytics on the actual data itself so be on the lookout for posts about those features as they are added. I couldn’t be more pleased with the progress I have made in my continued learning of PHP Back-end Web Development. Being self-taught, I suffer a great deal from Impostor Syndrome. But, there is nothing like real-world experience and seeing the code actually come to life in application to remove those thoughts of self-doubt. Like what you have read? See anything incorrect? Please comment below and thank you for reading!!! A Call To Action! Thank you for taking the time to read this post. I truly hope you discovered something interesting and enlightening. Please share your findings here, with someone else you know who would get the same value out of it as well. Visit the Portfolio-Projects page to see blog post/technical writing I have completed for clients. To receive email notifications (Never Spam) from this blog (“Digital Owl’s Prose”) for the latest blog posts as they are published, please subscribe (of your own volition) by clicking the ‘Click To Subscribe!’ button in the sidebar on the homepage! (Feel free at any time to review the Digital Owl’s Prose Privacy Policy Page for any questions you may have about: email updates, opt-in, opt-out, contact forms, etc…) Be sure and visit the “Best Of” page for a collection of my best blog posts. Josh Otwell has a passion to study and grow as a SQL Developer and blogger. Other favorite activities find him with his nose buried in a good book, article, or the Linux command line. Among those, he shares a love of tabletop RPG games, reading fantasy novels, and spending time with his wife and two daughters. Disclaimer: The examples presented in this post are hypothetical ideas of how to achieve similar types of results. They are not the utmost best solution(s). The majority, if not all, of the examples provided, are performed on a personal development/learning workstation-environment and should not be considered production quality or ready. Your particular goals and needs may vary. Use those practices that best benefit your needs and goals. Opinions are my own. The post PHP CRUD Application – Portfolio Piece appeared first on Digital Owl's Prose. https://joshuaotwell.com/php-crud-application-portfolio-piece/

0 notes

t-baba · 5 years ago

Photo

18 Best Contact Form PHP Scripts for 2020

Are you looking for an easy to use contact form PHP script? Contact forms are a must-have for every website. They encourage your site visitors to engage with you, while potentially lowering the amount of spam you get.

For businesses, this engagement with visitors increases the chances of turning them into clients or customers and thus increasing revenue.

If you're looking for an easy and cost-effective contact form PHP script, read on!

Why You Need a Form on Your Website

Web forms contribute more than 60% of lead generation on a site, which means contact forms lead to higher conversions. Online forms also allow you as a business to collect data, which is crucial for any marketing success.

The good news is that forms are also easy to add to any website and can be customized to match your brand. Plus, they act as a security measure against spammers and bots.

The Best Contact Form PHP Scripts on CodeCanyon in 2020

CodeCanyon features over 200 Form PHP Scripts that you can purchase today. Below are some of the popular and best-selling PHP form scripts in the CodeCanyon library.

Some of the features you are guaranteed to get from these PHP contact form scripts include:

multiple file upload

ability to design any form

beautiful pre-designed templates

notifications

Ajax-enabled submission and validation

CAPTCHA options such as Google reCAPTCHA, Honeypot, etc.

auto-emailing

responsive design

form validation

14 Best Contact Form PHP Scripts at CodeCanyon

1. Best Seller: Quform - Responsive AJAX Contact Form

Quform is a versatile AJAX contact form that can be adapted to be a registration form, quote form, or any other form needed. It even has the option to save data to a database.

Best features:

three ready-to-use themes with six variations

ability to integrate into your theme design

ability to create complex form layouts

file uploads supported

and more

With tons of other customizations available, Quform: Responsive AJAX Contact Form is bound to keep the most discerning user happy.

2. PHP Form Builder

Another CodeCanyon top seller, PHP Form Builder includes the jQuery live validation plugin. It enables you to build any form and connect a database to insert, update, or delete records. It also allows you to send your emails using customizable HTML/CSS templates.

Best features:

over 50 pre-built templates included

highly customizable layout

accepts any HTML5 form elements

default options ready for Bootstrap 4

email sending with advanced options

Material Design and Foundation forms

and more

With loads of options for creating a variety of elegant contact forms and extensive documentation to help you on your way, PHP Form Builder is a top choice for PHP site owners.

3. Easy Forms: Advanced Form Builder and Manager

Easy Forms features an advanced drag-and-drop PHP form builder that lets you design and develop forms quickly without any coding or programming skills. It also features amazing themes and templates and the ability to send instant notifications. Easy Forms also includes a form analytics dashboard where you get to see an overview of form statistics, including conversions.

Other features include:

multi-language support

double opt-in for users

password protected forms

ability to export data

submission reports

advanced field validation

auto-responder and email notifications

4. Just Forms Full Version

Just Forms is a PHP framework that helps you create any form quickly and painlessly, without any programming knowledge. It features 120+ fully-functional forms, which you can build on to create your form. It has advanced features like the ability to save form data to a PDF and even create order forms with calculations.

Other features include:

fully responsive

social icons and buttons

120+ AJAX PHP forms with client-side and server-side validation

100+ ready-to-use templates

ability to export data to a CSV file and PDF document

ability to save data to a database

PHP CAPTCHA

protection against XSS, CSRF, and SQL injection attacks

jQuery enhancements such as date picker, date and time picker, color picker, numeric stepper, sliders, and many more

5. Ultimate PHP, HTML5 and AJAX Contact Form

The Ultimate PHP form script lets you create an AJAX-based contact form with built-in Google reCAPTCHA to protect against spam robots. It also lets you create both custom and mandatory fields, as well as adding multiple validations on custom fields. This system also supports file uploads for formats such as PNG, MS Word, and others.

Some of its best features include:

easy to install and mobile-friendly

SMTP authentication for user verification

custom thank you messages

AJAX-enabled (no page reloads for validation)

CSS animations

cross-site scripting (XSS) attack prevention

6. ContactMe: Responsive AJAX Contact Form

ContactMe is another bestseller that is extremely customizable and allows site owners to create different versions of contact forms to fit their needs. Besides, it is fully responsive and mobile-friendly. If you're looking for some inspiration, it features 28 combinations of ready-to-use forms and seven concrete examples to spark your creativity.

This is a script to consider for your next project.

Best features:

beautiful themes

easy to install

no database required

file attachment supported

secure

ability to set different language messages for each form

7. Zigaform PHP Form Builder: Contact and Survey

If you're looking for a universal PHP form builder, Zigaform is the right script for the job. It can be integrated with Joomla, Magento, PrestaShop, and any other PHP website. It lets you organize your form elements with a grid system and even enables you to assign conditional logic to your forms. When it comes to customizations, you are spoilt for choice as Zigaform comes with 42+ elements, over 650 fonts, and 769+ font icons, ensuring your forms are as attractive as you need them to be.

Other features include:

ability to filter and search submitted data

graphic charts of submitted data

notification email for users

file upload support

export form data to CSV and PDF

AJAX powered

spam protection

Zigaform is the perfect script to create a contact form for any website.

8. Universal Form Builder

Universal Form Builder is easy to use and can be integrated into any website, including Joomla, Magento, OpenCart, and so on. It is the perfect script to build your forms in seconds with the aid of a drag-and-drop system. It also lets you change the appearance of any element, thus ensuring your forms are consistent with your website theme.

Main features include:

multi-language support

fully responsive design

full skin customizer

background images

live preview during customizing

support for all browsers, including older versions of Internet Explorer

form and visit statistics

9. Multi-Purpose Form Generator

Just like the name suggests, Multi-Purpose Form Generator is an advanced web application that provides an easy drag-and-drop interface to build simple or complex forms in seconds. It also includes the ability to integrate your forms with Google reCAPTCHA to prevent spam submissions and bots.

Other features include:

ability to export form data

customizations according to your needs

Ajax-enabled forms

5+ different types of validation support

file upload support

preview forms before publishing

fully responsive

10. Multi-Step Form

The Multi-Step Form responsive PHP form script is suited for any business or organization. It is the perfect form to ensure that your visitors or clients will submit their quotes and also get valuable information regarding your business. Multi-Step Form uses PHP, jQuery, and Ajax, so no page reload will occur between steps. It also has the option of capturing the IP of the user and includes an anti-spam check.

Main features:

no database required

attractive design

popup alert for validation errors

file attachment support

calendar date picker

security guaranteed

multi-language support

11. Simple AJAX Contact Forms

These simple AJAX contact forms are created using the mobile first design philosophy. As a result, they look great on mobile devices. The forms have a minimalist approach to design and come with 8 different templates. The form is submitted in the background via AJAX and the script relies on PHP Mailer to handle the sending of all the form data to the desired email address.

Here is a brief list of its important features:

highly customizable with 8 different UI styles and a date picker

support for multiple file attachments

input validation

spam protection

smart error handling

redirect after submit

and many more

The script offers a lot more features and you can read about it on the plugin description page. Don't forget to check out the live demos of these forms.

12. ContactPLUS+ PHP Contact Form

ContactPlus+ is another clean and simple contact form. It comes in three styles: a blank slate, unstyled version that you can build on to suit your taste, a normal form with just the essential information needed on a contact form, and a longer form to accommodate an address.

Best features:

CAPTCHA verification

successful submission message

two styled and one unstyled version

and more

If you’re looking for a clean and simple contact form that will integrate easily on your PHP website, ContactPLUS+ PHP Contact Form is the one for you.

13. Conformy—PHP Ajax Modern Contact Form

Conformy is yet another user-friendly AJAX based contact form with a modern and stylish design.

The form is based on Bootstrap 4. So, Conformy will blend seamlessly with the overall design of the website if it is already using the Bootstrap framework. The styling of the form uses SCSS so changing things like the color of the form would be pretty easy. Overall, the theme uses a minimal design approach which makes it easier for you to make any modifications.

Main features:

live validation

custom CAPTCHA

fully responsive

cross-browser support

custom select options

14. Green Forms—Standalone Form Builder

Green Forms is a standalone form builder script that you can use to create multi-purpose forms that look great across different screen sizes.

The form builder is designed in a way that makes it incredibly easy for you to customize almost everything. This includes things like fonts and text color. Every form that you create using Green Forms can be added to any webpage you like with just a simple copy-paste of the provided HTML and JavaScript code.

Some useful features of the plugin:

drag and drop form builder

built-in anti spam protection

form styling

multi-step forms

conditional logic

over 20 form elements

and more

Free PHP Contact Form Scripts

Some people might want to try out some free PHP contact form scripts before they look at the premium options. This makes sense if you are on a tight budget. However, keep in mind that free scripts are usually not updated on a regular basis. You might also not get quick support form developers of these free scripts.

That being said, sometimes free is the right choice! Here are 4 free PHP contact form scripts that you might find useful.

1. Bootstrap Bay Contact Form

This contact form script is ideal for people who are already using Bootstrap for their websites. It comes with a simple contact form and very basic Maths based Captcha.

2. Simple PHP Contact Form

This is a simple contact form created using PHP with support for HTML5 form validation. It also offers JavaScript fallback for validation if the browser does not support HTML5 form validation.

3. Contactable jQuery Plugin

This is a jQuery plugin that allows anyone who is using a PHP based website to quickly integrate a feature rich contact form. It comes with all the necessary frontend and backend files that you might need to integrate the form into your website.

4. Spam Free PHP Contact Form

This PHP contact form script adds a hidden field to the form to prevent automated contact form spams. It also generates your email after the page has loaded using JavaScript. This prevents some simple scrapers from getting access to your email address. There are two versions of this script called Simple and Advanced. You can use either of them on your website.

Tips for Using a Contact Form

Contact forms provide a great way for your readers or clients to contact you when they want to share something or need help. Here are a few tips that might help you use contact forms more effectively and choose the ideal script for your project.

1. Always Validate User Input

Proper validation of user input helps both you as well as you readers. Some readers might fill out wrong type of information by mistake. Other might be more malicious and might want to harm your business. Validating form input will help you solve both these problems.

2. Use Some Anti-Spam Measures

This is also very important. There are a lot of bots and scrapers on the internet which just fill out any form they come across to spread spam. This can be a huge problem for businesses as they will have to waste time and resources to filter out the spam later.

3. Create Simple Forms with Clear Instructions

Basic contact forms are open-ended and can be filled out by everyone. However, let say a client wants your help with some technical issue. They might not know exactly what information they should provide to you to get help.

In such cases, it would greatly improve the overall productivity if they are told in advance in the contact form the minimum information you need from them.

The Best PHP Scripts on CodeCanyon

Explore thousands of the best and most useful PHP scripts ever created on CodeCanyon. With a low-cost one-time payment, you can purchase one of these high-quality PHP scripts and improve your website experience for you and your visitors.

Here are a few of the best-selling and up-and-coming PHP scripts available on CodeCanyon for 2020.

PHP

11 Best PHP Event Calendar and Booking Scripts... and 3 Free Options

Monty Shokeen

PHP

10 Best PHP URL Shortener Scripts

Monty Shokeen

PHP

11 Best Contact Form PHP Scripts for 2020

Monty Shokeen

PHP

Comparing the 5 Best PHP Form Builders (And 4 Free Scripts)

Monty Shokeen

PHP

Create Beautiful Forms With PHP Form Builder

Ashraff Hathibelagal

by Monty Shokeen via Envato Tuts+ Code https://ift.tt/2P6tfRC

#CSS3 #HTML5 Branding #HTML5 Weekly #HTMLl5 demos #Javascript #Javascript Branding #Javascript Weekly

0 notes

nancydsmithus · 6 years ago

Text

Creating A Shopping Cart With HTML5 Web Storage

Matt Zand

2019-08-26T14:30:59+02:002019-08-26T13:06:56+00:00

With the advent of HTML5, many sites were able to replace JavaScript plugin and codes with simple more efficient HTML codes such as audio, video, geolocation, etc. HTML5 tags made the job of developers much easier while enhancing page load time and site performance. In particular, HTML5 web storage was a game changer as they allow users’ browsers to store user data without using a server. So the creation of web storage, allowed front-end developers to accomplish more on their website without knowing or using server-side coding or database.

Online e-commerce websites predominantly use server-side languages such as PHP to store users’ data and pass them from one page to another. Using JavaScript back-end frameworks such as Node.js, we can achieve the same goal. However, in this tutorial, we’ll show you step by step how to build a shopping cart with HTML5 and some minor JavaScript code. Other uses of the techniques in this tutorial would be to store user preferences, the user’s favorite content, wish lists, and user settings like name and password on websites and native mobile apps without using a database.

Many high-traffic websites rely on complex techniques such as server clustering, DNS load balancers, client-side and server-side caching, distributed databases, and microservices to optimize performance and availability. Indeed, the major challenge for dynamic websites is to fetch data from a database and use a server-side language such as PHP to process them. However, remote database storage should be used only for essential website content, such as articles and user credentials. Features such as user preferences can be stored in the user’s browser, similar to cookies. Likewise, when you build a native mobile app, you can use HTML5 web storage in conjunction with a local database to increase the speed of your app. Thus, as front-end developers, we need to explore ways in which we can exploit the power of HTML5 web storage in our applications in the early stages of development.

I have been a part of a team developing a large-scale social website, and we used HTML5 web storage heavily. For instance, when a user logs in, we store the hashed user ID in an HTML5 session and use it to authenticate the user on protected pages. We also use this feature to store all new push notifications — such as new chat messages, website messages, and new feeds — and pass them from one page to another. When a social website gets high traffic, total reliance on the server for load balancing might not work, so you have to identify tasks and data that can be handled by the user’s browser instead of your servers.

Project Background

A shopping cart allows a website’s visitor to view product pages and add items to their basket. The visitor can review all of their items and update their basket (such as to add or remove items). To achieve this, the website needs to store the visitor’s data and pass them from one page to another, until the visitor goes to the checkout page and makes a purchase. Storing data can be done via a server-side language or a client-side one. With a server-side language, the server bears the weight of the data storage, whereas with a client-side language, the visitor’s computer (desktop, tablet or smartphone) stores and processes the data. Each approach has its pros and cons. In this tutorial, we’ll focus on a simple client-side approach, based on HTML5 and JavaScript.

Note: In order to be able to follow this tutorial, basic knowledge of HTML5, CSS and JavaScript is required.

Project Files

Click here to download the project’s source files. You can see a live demo, too.

Overview Of HTML5 Web Storage

HTML5 web storage allows web applications to store values locally in the browser that can survive the browser session, just like cookies. Unlike cookies that need to be sent with every HTTP request, web storage data is never transferred to the server; thus, web storage outperforms cookies in web performance. Furthermore, cookies allow you to store only 4 KB of data per domain, whereas web storage allows at least 5 MB per domain. Web storage works like a simple array, mapping keys to values, and they have two types:

Session storage This stores data in one browser session, where it becomes available until the browser or browser tab is closed. Popup windows opened from the same window can see session storage, and so can iframes inside the same window. However, multiple windows from the same origin (URL) cannot see each other’s session storage.

Local storage This stores data in the web browser with no expiration date. The data is available to all windows with the same origin (domain), even when the browser or browser tabs are reopened or closed.

Both storage types are currently supported in all major web browsers. Keep in mind that you cannot pass storage data from one browser to another, even if both browsers are visiting the same domain.

Build A Basic Shopping Cart

To build our shopping cart, we first create an HTML page with a simple cart to show items, and a simple form to add or edit the basket. Then, we add HTML web storage to it, followed by JavaScript coding. Although we are using HTML5 local storage tags, all steps are identical to those of HTML5 session storage and can be applied to HTML5 session storage tags. Lastly, we’ll go over some jQuery code, as an alternative to JavaScript code, for those interested in using jQuery.

Add HTML5 Local Storage To Shopping Cart

Our HTML page is a basic page, with tags for external JavaScript and CSS referenced in the head.

<!DOCTYPE HTML> <html lang="en-US"> <head> <title>HTML5 Local Storage Project</title> <META charset="UTF-8"> <META name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <META NAME='rating' CONTENT='General' /> <META NAME='expires' CONTENT='never' /> <META NAME='language' CONTENT='English, EN' /> <META name="description" content="shopping cart project with HTML5 and JavaScript"> <META name="keywords" content="HTML5,CSS,JavaScript, html5 session storage, html5 local storage"> <META name="author" content="dcwebmakers.com"> <script src="Storage.js"></script> <link rel="stylesheet" href="StorageStyle.css"> </head>

Below is the HTML content for the page’s body:

<form name=ShoppingList> <div id="main"> <table> <tr> <td><b>Item:</b><input type=text name=name></td> <td><b>Quantity:</b><input type=text name=data></td> </tr> <tr> <td> <input type=button value="Save" onclick="SaveItem()"> <input type=button value="Update" onclick="ModifyItem()"> <input type=button value="Delete" onclick="RemoveItem()"> </td> </tr> </table> </div> <div id="items_table"> <h3>Shopping List</h3> <table id=list></table> <p> <label><input type=button value="Clear" onclick="ClearAll()"> <i>* Delete all items</i></label> </p> </div> </form>

Adding JavaScript To The Shopping Cart

We’ll create and call the JavaScript function doShowAll() in the onload() event to check for browser support and to dynamically create the table that shows the storage name-value pair.

Alternatively, you can use the JavaScript onload event by adding this to the JavaScript code:

window.load=doShowAll();

Or use this for jQuery:

$( window ).load(function() { doShowAll(); });

In the CheckBrowser() function, we would like to check whether the browser supports HTML5 storage. Note that this step might not be required because most modern web browsers support it.

/* =====> Checking browser support. //This step might not be required because most modern browsers do support HTML5. */ //Function below might be redundant. function CheckBrowser() { if ('localStorage' in window && window['localStorage'] !== null) { // We can use localStorage object to store data. return true; } else { return false; } }

Inside the doShowAll(), if the CheckBrowser() function evaluates first for browser support, then it will dynamically create the table for the shopping list during page load. You can iterate the keys (property names) of the key-value pairs stored in local storage inside a JavaScript loop, as shown below. Based on the storage value, this method populates the table dynamically to show the key-value pair stored in local storage.

// Dynamically populate the table with shopping list items. //Step below can be done via PHP and AJAX, too. function doShowAll() { if (CheckBrowser()) { var key = ""; var list = "<tr><th>Item</th><th>Value</th></tr>\n"; var i = 0; //For a more advanced feature, you can set a cap on max items in the cart. for (i = 0; i <= localStorage.length-1; i++) { key = localStorage.key(i); list += "<tr><td>" + key + "</td>\n<td>" + localStorage.getItem(key) + "</td></tr>\n"; } //If no item exists in the cart. if (list == "<tr><th>Item</th><th>Value</th></tr>\n") { list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n"; } //Bind the data to HTML table. //You can use jQuery, too. document.getElementById('list').innerHTML = list; } else { alert('Cannot save shopping list as your browser does not support HTML 5'); } }

Note: Either you or your framework will have a preferred method of creating new DOM nodes. To keep things clear and focused, our example uses .innerHTML even though we’d normally avoid that in production code.

Tip: If you’d like to use jQuery to bind data, you can just replace document.getElementById('list').innerHTML = list; with $(‘#list’).html()=list;.

Run And Test The Shopping Cart

In the previous two sections, we added code to the HTML head, and we added HTML to the shopping cart form and basket. We also created a JavaScript function to check for browser support and to populate the basket with the items in the cart. In populating the basket items, the JavaScript fetches values from HTML web storage, instead of a database. In this part, we’ll show you how the data are inserted into the HTML5 storage engine. That is, we’ll use HTML5 local storage in conjunction with JavaScript to insert new items to the shopping cart, as well as edit an existing item in the cart.

Note: I’ve added tips sections below to show jQuery code, as an alternative to the JavaScript ones.

We’ll create a separate HTML div element to capture user input and submission. We’ll attach the corresponding JavaScript function in the onClick event for the buttons.

You can set properties on the localStorage object similar to a normal JavaScript object. Here is an example of how we can set the local storage property myProperty to the value myValue:

localStorage.myProperty="myValue";

You can delete local storage property like this:

delete localStorage.myProperty;

Alternately, you can use the following methods to access local storage:

localStorage.setItem('propertyName','value'); localStorage.getItem('propertyName'); localStorage.removeItem('propertyName');

To save the key-value pair, get the value of the corresponding JavaScript object and call the setItem method:

function SaveItem() { var name = document.forms.ShoppingList.name.value; var data = document.forms.ShoppingList.data.value; localStorage.setItem(name, data); doShowAll(); }

Below is the jQuery alternative for the SaveItem function. First, add an ID to the form inputs:

<td><b>Item:</b><input type=text name="name" id="name"></td> <td><b>Quantity:</b><input type=text name="data" id="data"></td>

Then, select the form inputs by ID, and get their values. As you can see below, it is much simpler than JavaScript:

function SaveItem() { var name = $("#name").val(); var data = $("#data").val(); localStorage.setItem(name, data); doShowAll(); }

To update an item in the shopping cart, you have to first check whether that item’s key already exists in local storage, and then update its value, as shown below:

//Change an existing key-value in HTML5 storage. function ModifyItem() { var name1 = document.forms.ShoppingList.name.value; var data1 = document.forms.ShoppingList.data.value; //check if name1 is already exists //Check if key exists. if (localStorage.getItem(name1) !=null) { //update localStorage.setItem(name1,data1); document.forms.ShoppingList.data.value = localStorage.getItem(name1); } doShowAll(); }

Below shows the jQuery alternative.

function ModifyItem() { var name1 = $("#name").val(); var data1 = $("#data").val(); //Check if name already exists. //Check if key exists. if (localStorage.getItem(name1) !=null) { //update localStorage.setItem(name1,data1); var new_info=localStorage.getItem(name1); $("#data").val(new_info); } doShowAll(); }

We will use the removeItem method to delete an item from storage.

function RemoveItem() { var name=document.forms.ShoppingList.name.value; document.forms.ShoppingList.data.value=localStorage.removeItem(name); doShowAll(); }

Tip: Similar to the previous two functions, you can use jQuery selectors in the RemoveItem function.

There is another method for local storage that allows you to clear the entire local storage. We call the ClearAll() function in the onClick event of the “Clear” button:

We use the clear method to clear the local storage, as shown below:

function ClearAll() { localStorage.clear(); doShowAll(); }

Session Storage

The sessionStorage object works in the same way as localStorage. You can replace the above example with the sessionStorage object to expire the data after one session. Once the user closes the browser window, the storage will be cleared. In short, the APIs for localStorage and sessionStorage are identical, allowing you to use the following methods:

setItem(key, value)

getItem(key)

removeItem(key)

clear()

key(index)

length

Shopping Carts With Arrays And Objects

Because HTML5 web storage only supports single name-value storage, you have to use JSON or another method to convert your arrays or objects into a single string. You might need an array or object if you have a category and subcategories of items, or if you have a shopping cart with multiple data, like customer info, item info, etc. You just need to implode your array or object items into a string to store them in web storage, and then explode (or split) them back to an array to show them on another page. Let’s go through a basic example of a shopping cart that has three sets of info: customer info, item info and custom mailing address. First, we use JSON.stringify to convert the object into a string. Then, we use JSON.parse to reverse it back.

Hint: Keep in mind that the key-name should be unique for each domain.

//Customer info //You can use array in addition to object. var obj1 = { firstname: "John", lastname: "thomson" }; var cust = JSON.stringify(obj1); //Mailing info var obj2 = { state: "VA", city: "Arlington" }; var mail = JSON.stringify(obj2); //Item info var obj3 = { item: "milk", quantity: 2 }; var basket = JSON.stringify(obj3); //Next, push three strings into key-value of HTML5 storage. //Use JSON parse function below to convert string back into object or array. var New_cust=JSON.parse(cust);

Summary

In this tutorial, we have learned how to build a shopping cart step by step using HTML5 web storage and JavaScript. We’ve seen how to use jQuery as an alternative to JavaScript. We’ve also discussed JSON functions like stringify and parse to handle arrays and objects in a shopping cart. You can build on this tutorial by adding more features, like adding product categories and subcategories while storing data in a JavaScript multi-dimensional array. Moreover, you can replace the whole JavaScript code with jQuery.

We’ve seen what other things developers can accomplish with HTML5 web storage and what other features they can add to their websites. For example, you can use this tutorial to store user preferences, favorited content, wish lists, and user settings like names and passwords on websites and native mobile apps, without using a database.

To conclude, here are a few issues to consider when implementing HTML5 web storage:

Some users might have privacy settings that prevent the browser from storing data.

Some users might use their browser in incognito mode.

Be aware of a few security issues, like DNS spoofing attacks, cross-directory attacks, and sensitive data compromise.

Related Reading

“Browser Storage Limits And Eviction Criteria,” MDN web docs, Mozilla

“Web Storage,” HTML Living Standard,

“This Week In HTML 5,” The WHATWG Blog

(dm, il)

0 notes

josephkchoi · 7 years ago

Text

25 Things You Can Do With Unbounce that Your UX/Web Team Will Love

It’s Day 3 of Product Awareness Month. Today’s post is about discovering new use-cases for your products that can be useful for different functional users in your customer’s company. — Unbounce co-founder Oli Gardner

If you read the opening post of Product Awareness Month, you would have read about the concept of Productizing Our Technology (POT).

Productizing Our Technology By taking our core tech, combining the available features, with new jQuery scripts, CSS, and some 3rd-party integrations, it’s possible to create a plethora of new “mini-products” that if embraced by the community, could inform future product direction.

When we created an initial list of product ideas, expanding upon what the base product can already do, I realized that — as we’ve moved from a single product to multiple — we’d not changed our perception of who the functional buyer persona is.

If you look at the table below, notice how product #1 is a standalone landing page used primarily for paid ad campaigns, but products #2 and #3 are designed to be used primarily on your website.

.tabular {table-layout:fixed;} .tabular td {border:1px solid #333 !important;} .tabular td strong {font-size:0.6rem !important;} .tabular td a {font-size:0.6rem !important;} .tabular td {padding:10px !important; vertical-align:top !important;} .col1 {width:15% !important;} .col2 {width:50% !important;} .col3 {width:10% !important;} .col4 {width:10% !important;} .col5 {width:15% !important;} .pmmPot {font-size:0.8rem !important;} .now {background-color:#d2e0cf;} .nowDark {background-color:#B7D6AA !important;font-weight:bold !important;} .nowLight {background-color:#fff !important;} .now td {font-size:0.6rem !important;} .nowDark td {font-size:0.6rem !important;} .mvp {background-color:#fce6ce;} .mvp td {font-size:0.6rem !important;} .mvpDark {background-color:#F8CB9F;font-weight:bold !important;} .mvpDark td {font-size:0.6rem !important;} .new {background-color:#f4cccc;} .new td {font-size:0.6rem !important;} .newDark {background-color:#E9999A;font-weight:bold !important;} .newDark td {font-size:0.6rem !important;font-weight:bold !important;} .section {font-size:0.7rem; font-weight:bold;} .headerRow {font-size:0.6rem !important;font-weight:bold; color:#fff !important;background-color:#0F4F6E !important;}

PRODUCT #1 Landing Pages #2 Popups #3 Sticky Bars Primary Use Case Use standalone landing pages to convert more of paid (AdWords) traffic. Use on website pages to convert more organic traffic. Use on website pages to convert more organic traffic. Primary Persona Campaign Strategist Website Owner Website Owner Secondary Persona Designer Campaign Strategist Campaign Strategist Tertiary Persona Copywriter Web Designer / Developer Web Designer / Developer

Note: that for the personas listed, these are intentionally general, as it’s still part of our discovery. My goal is simply to show that they are most likely different.

We didn’t immediately realize that the teams using these products may not even be in the same department (marketing vs. web team vs. software development), for example. Or if they are in the same department (marketing), they might not work together on a daily basis.

This is a huge problem because it assumes that someone who runs paid campaigns is also going to be optimizing the organic traffic to a website, and is no doubt one of the reasons for low adoption of product #2 and #3.

A WTF Moment – How Could We Be So Blind?

When we talked to our customers and community members, we uncovered a startling fact: most people thought that the new products could only be used on Unbounce landing pages.

WUUUUTTTT! Not true.

Yes, you can, if you want. But the primary use case for the new products is for your website. We really didn’t see this misconception coming, which shows how important it is to always talk to your customers.

Who uses your products?

If you have more than one product, or if the users of your single product have different job roles, are you targeting and communicating with them in different ways? Or have you assumed that everyone will understand the same messaging?

Web developers are not very likely to be downloading an ebook about marketing, and thus will not be on our mailing list to hear about new products that could, in fact, make their job easier and more productive.

So, today, I’m going to share some of the functional use cases of popups and sticky bars that would be used by the UX and web teams that work on and manage your website. This is a very different market than we normally speak to, but super important as some of our research has indicated after the initial launch.

As I explore these use cases, try to follow along with your own products, to see if there are ways that you can create new mini products from the technology you possess.

(Click image for full-size view)

Across the top (in yellow) are the core products, their features (such as targeting, triggers, display frequency), and the different hacks, data sources, and integrations, that can be combined to produce the new products listed in green in the first column.

To recap, each mini product is labelled as either NOW/MVP/NEW depending on how easy it is to create with our current tech:

NOW: These products are possible now with our existing feature set. MVP: These products are possible by adding some simple scripts/CSS to extend the core. NEW: These products would require a much deeper level of product or website development to make them possible. These are the examples that came from “blue sky” ideation, and are a useful upper anchor for what could be done.

The core technology is denoted as LP (Landing Pages), POP (Popups), SB (Sticky Bars).

In the table below you’ll find 25 of the ideas we came up with — that I selected from of a total of 121.

Follow our Product Awareness Month journey >> click here to launch a popup with a subscribe form (it uses our on-click trigger feature).

Product Name Product Description Core Tech Core Features Extras NOW: Can be built with existing features Micro sites By using the URL targeting feature, a single Sticky Bar with links to multiple Landing Pages can effectively create a microsite. LP + SB Targeting: URL Trigger: Entry N/A EU Cookie Law Bar You’ve probably seen them all over the place. “All websites owned in the EU or targeted towards EU citizens, are now expected to comply with the law.” The EU has always been very strict and this requirement is why these bars have been popping up everywhere. Good news is, they’re wasy to make with geo-targeting. SB Targeting: Geo Trigger: Entry N/A Two-Step Opt-In Form Instead of showing a lead gen form, you use a button or link that shows the form in a popup when clicked. This can help remove the perceived friction that a form conveys, and applies a level of commitment when the button is clicked that makes people more likely to continue and fill out the form. POP Trigger: Click N/A Cart Abandon Use an exit Popup on your ecommerce product/cart/checkout pages to provide an offer to encourage a purchase. POP Trigger: Exit N/A Multi-location GEO Redirect If you have websites for multiple countries, you can present the entry Popup that uses geolocation to ask if the visitor would like to visit the site in their own country. POP Targeting: Geo Trigger: Entry N/A Poll / Survey Add a form to a Popup of Sticky Bar to present poll or survey questions. POP or SB Trigger: Entry, Exit, Scroll Down, Scroll Up, Delay N/A NPS Survey Present a Net Promoter Score in a Sticky Bar to ask your visitors and customers to rate how likely they are to recommend your product or brand to others. SB Targeting: None, Cookie Trigger: Exit, Scroll, Delay N/A Outage Notification Present an entry Popup or Sticky Bar when there is site maintenance happening. SB or POP Targeting: URL, Cookie N/A Tooltips Present a popup when someone clicks to show more info/instructions. POP Trigger: Click N/A Referrer Contextual Welcome Present a contextually relevant message to people arriving from another site. POP or SB Targeting: URL, Cookie, Geo Trigger: Entry N/A Co-marketing Contextual Welcome Present a contextually relevant message to people arriving from a campaign run by you and a comarketing partner. This could show the relationship (both logos) and the joint offer. POP or SB Targeting: Referrer, URL, Cookie Trigger: Entry, Scroll Up, Scroll Down, Exit, Delay N/A Mobile GPS: Closest Store Present a Sticky Bar when someone on a mobile site would benefit from knowing where the closest store is to them (potentially with an incentive to visit the store). SB Trigger: Entry, Scroll Up, Scroll Down, Exit, Delay N/A Holiday Hours Announcement Show details of changes in store hours. Could be used on exit to provide some urgency “We’re closing in 1 hour”. SB or POP Trigger: Entry, Exit N/A MVP: Can be built with existing features by adding some simple scripts/CSS Sticky Nav By removing the standard close button [x] from a Sticky Bar and adding smooth scroll anchor links, you can create a sticky navbar which can help increase page engagement. SB Trigger: Entry CSS: Hide close button Javascript: Smooth scroll Mobile App-Style Nav By placing a Sticky Bar at the bottom of the page (on mobile), using icons/text, you can create a mobile experience that looks and feels like an app. Check out plated.com on your phone as an example. Adding smoothscroll Javascript lets you use the nav to scroll up and down the page. SB Trigger: Entry CSS: Hide close button + mobile only Javascript: Smooth scroll Mobile Hamburger Menu A hamburger menu is the three lined icon that opens up a navigation menu. They typically slide in and out from the left side or top.Check out a demo in the Unbounce Community. SB Trigger: Click jQuery: Slide in/out Progress Bar Similar to a microsite, a progress bar could be targeted to appear on several pages. Using cookie targeting and CSS the progress bar could be updated to show which pages (steps) have been completed and which steps are remaining. SB Targeting: URL, Cookie jQuery: Set/Read cookies CSS: Prev/next step visual state “Maybe Later” Maybe Later is a new concept for ecommerce entrance popups that I will explore in depth on day 9 of Product Awareness Month. A large number of ecommerce sites have discounts/offers that show on arrival. This can often be a major disruption to the experience, even if the offer is of interest. The way ML works is that the popup would present 3 options: Yes/No/ML. If “Maybe Later” is clicked, the Popup closes and a persistent Sticky Bar appears at the bottom of the page to act as a subtle reminder of the offer – ready for when the visitor wants it. POP + SB Targeting: Cookie jQuery: Set/Read cookies, Log “Maybe Later” click Video Interaction Offers Having a CTA embedded in a video is great, but it’s very limited in its ability communicate more than a few words.Click here to visit a demo of this concept (created by Unbouncer, Noah Matsell). POP Targeting: Cookie jQuery End-of-video Talk to Sales Present a popup to someone who completes a video such as a demo. POP or SB Trigger: Custom script jQuery Sticky Video Widget You may have seen this on news blogs, where a video at the top becomes a smaller video stuck to the side or bottom of the window as you scroll. It’s a great way to ensure higher engagement with the video. Noah made a demo of a sticky video widget in the Unbounce community. SB Trigger: Scroll CSS Guided Tour Show a popup that begins a guided tour of the page/product. If you close it, the tour is over. If you click a next button it closes and a new popup is opened, positioned close to the feature it’s describing. POP Trigger: Click jQuery NEW: these require a deeper level of product or website development to make possible Ship it Faster By setting a cookie based on the shipping method on an ecommerce site, an exit Popup or Sticky Bar could be used to suggest a different shipping method (more expensive) to get it delivered faster. A smart upsell feature. POP or SB Targeting: Cookie Trigger: Exit Feature: Dynamic Text Replacement jQuery Out of Stock By setting a cookie based on stock availability on an ecommerce site, an exit Popup or Sticky Bar could present an email address field to ask if the visitor would like to be notified when the item is back in stock. POP or SB Targeting: Cookie Trigger: Exit jQuery CSS Sold Out: You Might Like By setting a cookie based on stock availability on an ecommerce site, a Popup or Sticky Bar could be shown that presents a set of recommended products related to an out of stock item. POP or SB Targeting: Cookie Trigger: Exit Feature: Dynamic Text Replacement jQuery CSS

As you can see, there are a ton of new use cases for the products, which are useful to a completely different set of functional users. Unless we do something to specifically target these new functional users, adoption won’t be our only problem, acquisition will be too.

How can you target different functional users?

Approach 1: Product Pages for Organic & Paid Traffic

One way to start validating these use cases is to create new product pages for them to see if you can attract some organic traffic. In our case, this would allow those searching for this type of product to arrive on our website where we may be able to demo the product as part of the experience.

Approach 2: Cross-Function Advocate Email Marketing

Another approach is to explicitly connect the different team members, through suggestive email copy. For instance, we could email our customers and educate them that our product can help others on their team – getting the conversation started. This has the benefit of communicating through an established brand advocate.

Prioritizing Product Development

One of our goals with POT is to gather insights into which new product ideas are in demand. There will without question be an increase in technical support questions based on the implementation requirements of these ideas, but I consider that a good problem to have. If there’s enough call for full productization, that’s a great way to increase adoption and the stickiness of our products.

How many new products could YOU build?

I’d love to hear in the comments how you can imagine doing this with your own software/products/services. Please jump into the comments and let me know. If you’re worried about your competitors stealing your ideas (I definitely thought about that when I decided on this approach – but I’m erring on the side of our core Transparency value), you could simply mention how many you think you could come up with, which is also very cool.

Now, everybody POT! Cheers Oli Gardner

p.s. Tell your web/UX teammates about this blog post :D

25 Things You Can Do With Unbounce that Your UX/Web Team Will Love published first on https://nickpontemrktg.wordpress.com/

0 notes

itsjessicaisreal · 7 years ago

Text

25 Things You Can Do With Unbounce that Your UX/Web Team Will Love

It’s Day 3 of Product Marketing Month. Today’s post is about discovering new use-cases for your products that can be useful for different functional users in your customer’s company. — Unbounce co-founder Oli Gardner

If you read the opening post of Product Marketing Month, you would have read about the concept of Productizing Our Technology (POT).

If you look at the table below, notice how product #1 is a standalone landing page used primarily for paid ad campaigns, but products #2 and #3 are designed to be used primarily on your website.

.tabular td {border:1px solid #333 !important;} .tabular td strong {font-size:12px !important;} .tabular td a {font-size:12px !important;} .tabular td {padding:10px !important; vertical-align:top !important;} .pmmPot {font-size:16px !important;} .now {background-color:#d2e0cf;} .nowDark {background-color:#B7D6AA !important;font-weight:bold !important;} .nowLight {background-color:#fff !important;} .now td {font-size:12px !important;} .nowDark td {font-size:12px !important;} .mvp {background-color:#fce6ce;} .mvp td {font-size:12px !important;} .mvpDark {background-color:#F8CB9F;font-weight:bold !important;} .mvpDark td {font-size:12px !important;} .new {background-color:#f4cccc;} .new td {font-size:12px !important;} .newDark {background-color:#E9999A;font-weight:bold !important;} .newDark td {font-size:12px !important;font-weight:bold !important;} .section {font-size:14px; font-weight:bold;} .headerRow {font-size:14px !important;font-weight:bold; color:#fff !important;background-color:#0F4F6E !important;}

Note: that for the personas listed, these are intentionally general, as it’s still part of our discovery. My goal is simply to show that they are most likely different.

A WTF Moment – How Could We Be So Blind?

When we talked to our customers and community members, we uncovered a startling fact: most people thought that the new products could only be used on Unbounce landing pages.

WUUUUTTTT! Not true.

Who uses your products?

As I explore these use cases, try to follow along with your own products, to see if there are ways that you can create new mini products from the technology you possess.

(Click image for full-size view)

To recap, each mini product is labelled as either NOW/MVP/NEW depending on how easy it is to create with our current tech:

The core technology is denoted as LP (Landing Pages), POP (Popups), SB (Sticky Bars).

In the table below you’ll find 25 of the ideas we came up with — that I selected from of a total of 121.

# Product Name Product Description Where Used Core Tech Core Features Extras NOW: Can be built with existing features 1 Microsites By using the URL targeting feature, a single Sticky Bar with links to multiple Landing Pages can effectively create a microsite. Landing Pages LP + SB Targeting: URL Trigger: Entry N/A 2 EU Cookie Law Bar You’ve probably seen them all over the place. “All websites owned in the EU or targeted towards EU citizens, are now expected to comply with the law.” The EU has always been very strict and this requirement is why these bars have been popping up everywhere. Good news is, they’re wasy to make with geo-targeting. Website SB Targeting: Geo Trigger: Entry N/A 3 Two-Step Opt-In Form Instead of showing a lead gen form, you use a button or link that shows the form in a popup when clicked. This can help remove the perceived friction that a form conveys, and applies a level of commitment when the button is clicked that makes people more likely to continue and fill out the form. Website, Landing Pages POP Trigger: Click N/A 4 Cart Abandonment Use an exit Popup on your ecommerce product/cart/checkout pages to provide an offer to encourage a purchase. Website POP Trigger: Exit N/A 5 Multi-location GEO Redirect If you have websites for multiple countries, you can present the entry Popup that uses geolocation to ask if the visitor would like to visit the site in their own country. Website POP Targeting: Geo Trigger: Entry N/A 6 Poll/Survey Add a form to a Popup of Sticky Bar to present poll or survey questions. Website POP or SB Trigger: Entry, Exit, Scroll Down, Scroll Up, Delay N/A 7 NPS Survey Present a Net Promoter Score in a Sticky Bar to ask your visitors and customers to rate how likely they are to recommend your product or brand to others. Website, Landing Pages SB Targeting: None, Cookie Trigger: Exit, Scroll, Delay N/A 8 Outage Notification Present an entry Popup or Sticky Bar when there is site maintenance happening. SB or POP Website Targeting: URL, Cookie N/A 9 Tooltips Present a popup when someone clicks to show more info/instructions. Website, Landing Pages POP Trigger: Click N/A 10 Referrer Contextual Welcome Present a contextually relevant message to people arriving from another site. Website, Landing Pages POP or SB Targeting: URL, Cookie, Geo Trigger: Entry N/A 11 Co-marketing Contextual Welcome Present a contextually relevant message to people arriving from a campaign run by you and a comarketing partner. This could show the relationship (both logos) and the joint offer. Website, Landing Pages POP or SB Targeting: Referrer, URL, Cookie Trigger: Entry, Scroll Up, Scroll Down, Exit, Delay N/A 12 Mobile GPS: Closest Store Present a Sticky Bar when someone on a mobile site would benefit from knowing where the closest store is to them (potentially with an incentive to visit the store). Website, Landing Pages SB Trigger: Entry, Scroll Up, Scroll Down, Exit, Delay N/A 13 Holiday Hours Announcement Show details of changes in store hours. Could be used on exit to provide some urgency “We’re closing in 1 hour”. Website, Landing Pages SB or POP Trigger: Entry, Exit N/A MVP: Can be built with existing features 14 Sticky Navigation By removing the standard close button [x] from a Sticky Bar and adding smooth scroll anchor links, you can create a sticky navbar which can help increase page engagement. Website, Landing Pages SB Trigger: Entry CSS: Hide close button Javascript: Smooth scroll 15 Mobile App-Style Navigation By placing a Sticky Bar at the bottom of the page (on mobile), using icons/text, you can create a mobile experience that looks and feels like an app. Check out plated.com on your phone as an example. Adding smoothscroll Javascript lets you use the nav to scroll up and down the page. Mobile Website, Mobile Landing Pages SB Trigger: Entry CSS: Hide close button + mobile only Javascript: Smooth scroll 16 Mobile Hamburger Menu A hamburger menu is the three lined icon that opens up a navigation menu. They typically slide in and out from the left side or top.Check out a demo in the Unbounce Community. Mobile Website SB Trigger: Click jQuery: Slide in/out 17 Progress Bar Similar to a microsite, a progress bar could be targeted to appear on several pages. Using cookie targeting and CSS the progress bar could be updated to show which pages (steps) have been completed and which steps are remaining. Website, Microsite, Landing Pages SB Targeting: URL, Cookie jQuery: Set/Read cookies CSS: Prev/next step visual state 18 “Maybe Later” Maybe Later is a new concept for ecommerce entrance popups that I will explore in depth on day 9 of Product Marketing Month. A large number of ecommerce sites have discounts/offers that show on arrival. This can often be a major disruption to the experience, even if the offer is of interest. The way ML works is that the popup would present 3 options: Yes/No/ML. If “Maybe Later” is clicked, the Popup closes and a persistent Sticky Bar appears at the bottom of the page to act as a subtle reminder of the offer – ready for when the visitor wants it. Website POP + SB Targeting: Cookie jQuery: Set/Read cookies, Log “Maybe Later” click 19 Video Interaction Offers Having a CTA embedded in a video is great, but it’s very limited in its ability communicate more than a few words.Click here to visit a demo of this concept (created by Unbouncer, Noah Matsell). Website, Landing Pages POP Targeting: Cookie jQuery 20 End-of-video Talk to Sales Present a popup to someone who completes a video such as a demo. Website, Landing Pages POP or SB Trigger: Custom script jQuery 21 Sticky Video Widget You may have seen this on news blogs, where a video at the top becomes a smaller video stuck to the side or bottom of the window as you scroll. It’s a great way to ensure higher engagement with the video. Noah made a demo of a sticky video widget in the Unbounce community. Blog SB Trigger: Scroll CSS 22 Guided Tour Show a popup that begins a guided tour of the page/product. If you close it, the tour is over. If you click a next button it closes and a new popup is opened, positioned close to the feature it’s describing. Website, In-app POP Trigger: Click jQuery NEW: Can be built with existing features 23 Ship it Faster By setting a cookie based on the shipping method on an ecommerce site, an exit Popup or Sticky Bar could be used to suggest a different shipping method (more expensive) to get it delivered faster. A smart upsell feature. Ecommerce Website POP or SB Targeting: Cookie Trigger: Exit Feature: Dynamic Text Replacement jQuery 24 Out of Stock By setting a cookie based on stock availability on an ecommerce site, an exit Popup or Sticky Bar could present an email address field to ask if the visitor would like to be notified when the item is back in stock. Ecommerce Website POP or SB Targeting: Cookie Trigger: Exit jQuery CSS 25 Sold Out: You Might Like By setting a cookie based on stock availability on an ecommerce site, a Popup or Sticky Bar could be shown that presents a set of recommended products related to an out of stock item. Ecommerce Website POP or SB Targeting: Cookie Trigger: Exit Feature: Dynamic Text Replacement jQuery CSS

How can you target different functional users?

Approach 1: Product Pages for Organic & Paid Traffic

Approach 2: Cross-Function Advocate Email Marketing

Prioritizing Product Development

How many new products could YOU build?

Now, everybody POT! Cheers Oli Gardner

p.s. Tell your web/UX teammates about this blog post :D

from Marketing http://unbounce.com/product-marketing/25-things-you-can-do-with-unbounce-your-ux-web-team-will-love/ via http://www.rssmix.com/

0 notes

littlemarketingproject · 7 years ago

Text

25 Things You Can Do With Unbounce that Your UX/Web Team Will Love

If you read the opening post of Product Marketing Month, you would have read about the concept of Productizing Our Technology (POT).

If you look at the table below, notice how product #1 is a standalone landing page used primarily for paid ad campaigns, but products #2 and #3 are designed to be used primarily on your website.

Note: that for the personas listed, these are intentionally general, as it’s still part of our discovery. My goal is simply to show that they are most likely different.

A WTF Moment – How Could We Be So Blind?

When we talked to our customers and community members, we uncovered a startling fact: most people thought that the new products could only be used on Unbounce landing pages.

WUUUUTTTT! Not true.

Who uses your products?

As I explore these use cases, try to follow along with your own products, to see if there are ways that you can create new mini products from the technology you possess.

(Click image for full-size view)

To recap, each mini product is labelled as either NOW/MVP/NEW depending on how easy it is to create with our current tech:

The core technology is denoted as LP (Landing Pages), POP (Popups), SB (Sticky Bars).

In the table below you’ll find 25 of the ideas we came up with — that I selected from of a total of 121.

# Product Name Product Description Where Used Core Tech Core Features Extras NOW: Can be built with existing features 1 Microsites By using the URL targeting feature, a single Sticky Bar with links to multiple Landing Pages can effectively create a microsite. Landing Pages LP + SB Targeting: URL Trigger: Entry N/A 2 EU Cookie Law Bar You’ve probably seen them all over the place. “All websites owned in the EU or targeted towards EU citizens, are now expected to comply with the law.” The EU has always been very strict and this requirement is why these bars have been popping up everywhere. Good news is, they’re wasy to make with geo-targeting. Website SB Targeting: Geo Trigger: Entry N/A 3 Two-Step Opt-In Form Instead of showing a lead gen form, you use a button or link that shows the form in a popup when clicked. This can help remove the perceived friction that a form conveys, and applies a level of commitment when the button is clicked that makes people more likely to continue and fill out the form. Website, Landing Pages POP Trigger: Click N/A 4 Cart Abandonment Use an exit Popup on your ecommerce product/cart/checkout pages to provide an offer to encourage a purchase. Website POP Trigger: Exit N/A 5 Multi-location GEO Redirect If you have websites for multiple countries, you can present the entry Popup that uses geolocation to ask if the visitor would like to visit the site in their own country. Website POP Targeting: Geo Trigger: Entry N/A 6 Poll/Survey Add a form to a Popup of Sticky Bar to present poll or survey questions. Website POP or SB Trigger: Entry, Exit, Scroll Down, Scroll Up, Delay N/A 7 NPS Survey Present a Net Promoter Score in a Sticky Bar to ask your visitors and customers to rate how likely they are to recommend your product or brand to others. Website, Landing Pages SB Targeting: None, Cookie Trigger: Exit, Scroll, Delay N/A 8 Outage Notification Present an entry Popup or Sticky Bar when there is site maintenance happening. SB or POP Website Targeting: URL, Cookie N/A 9 Tooltips Present a popup when someone clicks to show more info/instructions. Website, Landing Pages POP Trigger: Click N/A 10 Referrer Contextual Welcome Present a contextually relevant message to people arriving from another site. Website, Landing Pages POP or SB Targeting: URL, Cookie, Geo Trigger: Entry N/A 11 Co-marketing Contextual Welcome Present a contextually relevant message to people arriving from a campaign run by you and a comarketing partner. This could show the relationship (both logos) and the joint offer. Website, Landing Pages POP or SB Targeting: Referrer, URL, Cookie Trigger: Entry, Scroll Up, Scroll Down, Exit, Delay N/A 12 Mobile GPS: Closest Store Present a Sticky Bar when someone on a mobile site would benefit from knowing where the closest store is to them (potentially with an incentive to visit the store). Website, Landing Pages SB Trigger: Entry, Scroll Up, Scroll Down, Exit, Delay N/A 13 Holiday Hours Announcement Show details of changes in store hours. Could be used on exit to provide some urgency “We’re closing in 1 hour”. Website, Landing Pages SB or POP Trigger: Entry, Exit N/A MVP: Can be built with existing features 14 Sticky Navigation By removing the standard close button [x] from a Sticky Bar and adding smooth scroll anchor links, you can create a sticky navbar which can help increase page engagement. Website, Landing Pages SB Trigger: Entry CSS: Hide close button Javascript: Smooth scroll 15 Mobile App-Style Navigation By placing a Sticky Bar at the bottom of the page (on mobile), using icons/text, you can create a mobile experience that looks and feels like an app. Check out plated.com on your phone as an example. Adding smoothscroll Javascript lets you use the nav to scroll up and down the page. Mobile Website, Mobile Landing Pages SB Trigger: Entry CSS: Hide close button + mobile only Javascript: Smooth scroll 16 Mobile Hamburger Menu A hamburger menu is the three lined icon that opens up a navigation menu. They typically slide in and out from the left side or top.Check out a demo in the Unbounce Community. Mobile Website SB Trigger: Click jQuery: Slide in/out 17 Progress Bar Similar to a microsite, a progress bar could be targeted to appear on several pages. Using cookie targeting and CSS the progress bar could be updated to show which pages (steps) have been completed and which steps are remaining. Website, Microsite, Landing Pages SB Targeting: URL, Cookie jQuery: Set/Read cookies CSS: Prev/next step visual state 18 “Maybe Later” Maybe Later is a new concept for ecommerce entrance popups that I will explore in depth on day 9 of Product Marketing Month. A large number of ecommerce sites have discounts/offers that show on arrival. This can often be a major disruption to the experience, even if the offer is of interest. The way ML works is that the popup would present 3 options: Yes/No/ML. If “Maybe Later” is clicked, the Popup closes and a persistent Sticky Bar appears at the bottom of the page to act as a subtle reminder of the offer – ready for when the visitor wants it. Website POP + SB Targeting: Cookie jQuery: Set/Read cookies, Log “Maybe Later” click 19 Video Interaction Offers Having a CTA embedded in a video is great, but it’s very limited in its ability communicate more than a few words.<br This product idea enables you to launch a popup when the video is complete, or when it’s paused, or when you’ve watched a series of videos. It’s seriously badass. Click here to visit a demo of this concept (created by Unbouncer, Noah Matsell). Website, Landing Pages POP Targeting: Cookie jQuery 20 End-of-video Talk to Sales Present a popup to someone who completes a video such as a demo. Website, Landing Pages POP or SB Trigger: Custom script jQuery 21 Sticky Video Widget You may have seen this on news blogs, where a video at the top becomes a smaller video stuck to the side or bottom of the window as you scroll. It’s a great way to ensure higher engagement with the video. Noah made a demo of a sticky video widget in the Unbounce community. Blog SB Trigger: Scroll CSS 22 Guided Tour Show a popup that begins a guided tour of the page/product. If you close it, the tour is over. If you click a next button it closes and a new popup is opened, positioned close to the feature it’s describing. Website, In-app POP Trigger: Click jQuery NEW: Can be built with existing features 23 Ship it Faster By setting a cookie based on the shipping method on an ecommerce site, an exit Popup or Sticky Bar could be used to suggest a different shipping method (more expensive) to get it delivered faster. A smart upsell feature. Ecommerce Website POP or SB Targeting: Cookie Trigger: Exit Feature: Dynamic Text Replacement jQuery 24 Out of Stock By setting a cookie based on stock availability on an ecommerce site, an exit Popup or Sticky Bar could present an email address field to ask if the visitor would like to be notified when the item is back in stock. Ecommerce Website POP or SB Targeting: Cookie Trigger: Exit jQuery CSS 25 Sold Out: You Might Like By setting a cookie based on stock availability on an ecommerce site, a Popup or Sticky Bar could be shown that presents a set of recommended products related to an out of stock item. Ecommerce Website POP or SB Targeting: Cookie Trigger: Exit Feature: Dynamic Text Replacement jQuery CSS

How can you target different functional users?

Approach 1: Product Pages for Organic & Paid Traffic

Approach 2: Cross-Function Advocate Email Marketing

Prioritizing Product Development

How many new products could YOU build?

Now, everybody POT! Cheers Oli Gardner

p.s. Tell your web/UX teammates about this blog post

25 Things You Can Do With Unbounce that Your UX/Web Team Will Love syndicated from https://unbounce.com

0 notes

maxslogic25 · 7 years ago

Text

25 Things You Can Do With Unbounce that Your UX/Web Team Will Love

If you read the opening post of Product Marketing Month, you would have read about the concept of Productizing Our Technology (POT).

If you look at the table below, notice how product #1 is a standalone landing page used primarily for paid ad campaigns, but products #2 and #3 are designed to be used primarily on your website.

Note: that for the personas listed, these are intentionally general, as it’s still part of our discovery. My goal is simply to show that they are most likely different.

A WTF Moment – How Could We Be So Blind?

When we talked to our customers and community members, we uncovered a startling fact: most people thought that the new products could only be used on Unbounce landing pages.

WUUUUTTTT! Not true.

Who uses your products?

As I explore these use cases, try to follow along with your own products, to see if there are ways that you can create new mini products from the technology you possess.

(Click image for full-size view)

To recap, each mini product is labelled as either NOW/MVP/NEW depending on how easy it is to create with our current tech:

The core technology is denoted as LP (Landing Pages), POP (Popups), SB (Sticky Bars).

In the table below you’ll find 25 of the ideas we came up with — that I selected from of a total of 121.

How can you target different functional users?

Approach 1: Product Pages for Organic & Paid Traffic

Approach 2: Cross-Function Advocate Email Marketing

Prioritizing Product Development

How many new products could YOU build?

Now, everybody POT! Cheers Oli Gardner

p.s. Tell your web/UX teammates about this blog post :D

from RSSMix.com Mix ID 8217493 http://unbounce.com/product-marketing/25-things-you-can-do-with-unbounce-your-ux-web-team-will-love/

0 notes

zacdhaenkeau · 7 years ago

Text

25 Things You Can Do With Unbounce that Your UX/Web Team Will Love

If you read the opening post of Product Marketing Month, you would have read about the concept of Productizing Our Technology (POT).

If you look at the table below, notice how product #1 is a standalone landing page used primarily for paid ad campaigns, but products #2 and #3 are designed to be used primarily on your website.

Note: that for the personas listed, these are intentionally general, as it’s still part of our discovery. My goal is simply to show that they are most likely different.

A WTF Moment – How Could We Be So Blind?

When we talked to our customers and community members, we uncovered a startling fact: most people thought that the new products could only be used on Unbounce landing pages.

WUUUUTTTT! Not true.

Who uses your products?

As I explore these use cases, try to follow along with your own products, to see if there are ways that you can create new mini products from the technology you possess.

(Click image for full-size view)

To recap, each mini product is labelled as either NOW/MVP/NEW depending on how easy it is to create with our current tech:

The core technology is denoted as LP (Landing Pages), POP (Popups), SB (Sticky Bars).

In the table below you’ll find 25 of the ideas we came up with — that I selected from of a total of 121.

How can you target different functional users?

Approach 1: Product Pages for Organic & Paid Traffic

Approach 2: Cross-Function Advocate Email Marketing

Prioritizing Product Development

How many new products could YOU build?

Now, everybody POT! Cheers Oli Gardner

p.s. Tell your web/UX teammates about this blog post :D

from RSSMix.com Mix ID 8217493 http://unbounce.com/product-marketing/25-things-you-can-do-with-unbounce-your-ux-web-team-will-love/

0 notes

racheltgibsau · 7 years ago

Text

25 Things You Can Do With Unbounce that Your UX/Web Team Will Love

If you read the opening post of Product Marketing Month, you would have read about the concept of Productizing Our Technology (POT).

If you look at the table below, notice how product #1 is a standalone landing page used primarily for paid ad campaigns, but products #2 and #3 are designed to be used primarily on your website.

Note: that for the personas listed, these are intentionally general, as it’s still part of our discovery. My goal is simply to show that they are most likely different.

A WTF Moment – How Could We Be So Blind?

When we talked to our customers and community members, we uncovered a startling fact: most people thought that the new products could only be used on Unbounce landing pages.

WUUUUTTTT! Not true.

Who uses your products?

As I explore these use cases, try to follow along with your own products, to see if there are ways that you can create new mini products from the technology you possess.

(Click image for full-size view)

To recap, each mini product is labelled as either NOW/MVP/NEW depending on how easy it is to create with our current tech:

The core technology is denoted as LP (Landing Pages), POP (Popups), SB (Sticky Bars).

In the table below you’ll find 25 of the ideas we came up with — that I selected from of a total of 121.

How can you target different functional users?

Approach 1: Product Pages for Organic & Paid Traffic

Approach 2: Cross-Function Advocate Email Marketing

Prioritizing Product Development

How many new products could YOU build?

Now, everybody POT! Cheers Oli Gardner

p.s. Tell your web/UX teammates about this blog post :D

from RSSMix.com Mix ID 8217493 http://unbounce.com/product-marketing/25-things-you-can-do-with-unbounce-your-ux-web-team-will-love/

0 notes

jamiekturner · 8 years ago

Text

jQuery Bootstrap Plugins (51 Great Examples)

So, you use Bootstrap so much in your projects and you want to have the best jQuery Bootstrap plugins to use? This article is for you.

Nowadays, over 7 million websites have incorporated Bootstrap in their design.

This is an insane number, and things get even crazier when you realize that around 10% of the top 10,000 websites make use of Bootstrap for various purposes.

The creators of the framework couldn’t have anticipated how big it would grow, and it is one of the staple frameworks for the front-end developers today.

Therefore, there are a lot of jQuery Bootstrap plugins available, for pretty much anything.

You should be taking a look at them if you’ll be using it, as they can expand the possibilities, by a lot.

A selection of jQuery Bootstrap plugins

Survey.js

Survey.js is jQuery JSON based survey library with visual editor and optional service for storing and analyzing data.

File Input Fields

File input fields look differently in all browsers. It’s a pain in the arse to design something that looks nice in all browsers and it sucks that support for this is not available in Twitter Bootstrap. This jQuery plugin is designed to make all file input fields look like standard Twitter Bootstrap buttons.

SolidMenu+

Another one of these jQuery Bootstrap plugins is the MegaMenu navgar. Create an Ultra Responsive yet Beautiful MegaMenu navbar for your next site. It uses CSS3 Animations and provides a modern style navigation look and feel in your website.

These sets of Responsive Mega Menu utilizes the Standard “navbar” framework from Bootstrap 3.0. It can work on Fixed and Responsive Layout.

100% Responsive, Works on All Devices

One Code: Works in All Devices

Beatiful Look and Feel

Bootstrap Navbar Framework

Bootstrap Drop Down Menu

Bootstrap 12-Column Grid Based, Compatible with BootStrap 3.0+

Line Icons Included, Vector Icons

Custom Widgets, Carousels, Images, Google Map, Sliders

Very light weight, No image needed

Easy Integration for your Web Projects

Varieties of Pure CSS3 Animations

Easy-Tree.js

A plugin base on jquery and bootstrap 3, can convert an un-order list to a tree easily. The tree that selectable, addable, editable and deletable.

BootstrapX Clickover

BootstrapX Clickover provides a Bootstrap extension to allow popovers to be opened and closed with clicks on elements instead of hover or focus.

jComponent

jComponent is the component library for creating reusable components with jQuery. With jComponent you can improve your existing projects or create new web single-page applications.

jQuery Responsive Bootstrap Portfolio And Lightbox

A set of responsive Bootstrap Portfolio And Lightbox contains bootstrap portfolio gallery, bootstrap lightbox gallery, bootstrap carousel with thumbnails and also support YouTube videos, vimeo video, self hosted videos etc with new features.

18 Light-boxes

7 Colors Schemes

6 Slider Portfolios

18 Simple Portfolios

Built With Bootstrap 3.x

3 Background Colors Schemes

2,3,4,5,6 columns grid portfolios

100% Responsive And Mobiles friendly

YouTube, Vimeo and Self hosted Videos Support

Checkbox X

An extended checkbox plugin for Bootstrap built using JQuery, which allows three checkbox states and includes additional styles. The plugin uses Bootstrap markup and CSS 3 styling by default, but it can be overridden with any other CSS markup. It also helps you to fallback to a native checkbox OR display native checkboxes with tristate capability.

Responsive Bootstrap Modal And Popup with jQuery

Sure, this one is a premium plugin, but still one of the great jQuery Bootstrap plugins in this article.

A set of responsive Bootstrap Modals and Popups those contain bootstrap carousel, images gallery, login, signup and contact us forms, subscribe and search bars, different types videos in modal etc with new features. It is made with bootstrap.

100% Responsive And Mobiles friendly

20 Ready modal style

5 Colors Schemes

3 Background Colors Schemes

Built With Bootstrap 3.x

26 Animation Effects

Different Types of Sliders in the Modals

Touch swipe Enabled In Sliders

Responsive Photo Gallery with jQuery & Bootstrap

A simple jQuery plugin that will create a Bootstrap based Photo Gallery for your images. Supports variable height for the images and captions. An optional “modal” box with “next” and “previous” paging is also included.

jQuery Slim, Image Upload and Ratio Cropping Plugin

Modern cross platform responsive image cropping and uploading. Slim features beautiful animations and graphics. Configuration and implementation are a walk in the park.

Features:

Responsive and Beautifully Animated

Compatible with both Bootstrap and Foundation

Super Fast

Able to auto crop and resize imagery

Capable of Correcting Device Orientation problems

Setup to upload via AJAX or Form POST

A Treat for the Eyes

Paradise Slider

We have prepared 100+ Pre-made layouts of bootstrap carousel. it is a responsive slider with touch enabled function. This slider is easy to customize and you can create new layouts by combining these pre-made layouts.

Features:

More Than 100 Documentation Pages Includes

More Than 100 Pre-made Layouts

Touch Enabled

100% Responsive

Beautiful Animation

Built With Bootstrap

Smooth Sliding Effects

Cross Browser Compatibility

YouTube, Vimeo & Self Hosted videos in slides.

Bootstrap Carousel Fade, Slide, Rotate and Zoom effects

Auto Inherit Bootstrap Theme Vertical Sidebar

It is a ready to use component in any bootstrap website. It consists of a vertical navigation menu based on css3 and jQuery.

Features:

Fully Resposive on all screens; Desktop, Tablet, Mobile

Same Code for all devices and platforms

Multiple Level Dropdown Menu (Unlimited)

Glyphicons – Bootstrap version 3.3.5

Inherit any theme look

Collapsible Mobile Menu

Timon

With Timon – Step Form Wizard you will have power combo of 21 different styles, 8 different transition effects, validation in your step form, titles and subtitles with multiple step. , also Timon – Step Form Wizard has predefined set of form sizes from tiny to large. You can easily create and customize any form to fit your needs.

Features:

Step navigation

Fully responsive

Many options for design and function

Can be used for tabs

Step navigation

21 Style

8 transition effect

Form Validator for Bootstrap

A user-friendly HTML5 form validation jQuery plugin for Bootstrap 3.The Validator plugin offers automatic form validation configurable via mostly HTML5 standard attributes. It also provides an unobtrusive user experience, because nobody likes a naggy form.

Configurable via data-api and standard HTML5 attributes

Patient to inform user of errors and eager to let them know the errors have been resolved

Submit is disabled until the form is valid and all required fields are complete

Customizable error messages

Custom validator functions

Validation of an input field via AJAX

EasyForms

Easy Forms is a web application that will help you design and develop web forms quickly and easily. Actually, you will not need programming skills to make your forms work in minutes.

Build any type of online forms: Contact forms, Order forms, Registration forms, Online surveys, Trivias and more.

Drag & Drop Fields. No coding skills required.

HTML5 Fields Support

Create Multi-Step Forms

Bootstrap CSS Support

Theme & Template Managers

Advanced CSS Editor with Form Live Preview

Iconpicker

Iconpicker is a jQuery icon picker plugin for Bootstrap 3 that allows you to choose and pick a icon from multiple icon sets in a tooltip-like popup interface.

Simple jQuery Star Rating System For Bootstrap 3

Yet another jQuery star rating plugin that converts a number input to a star rating widget using Bootstrap 3 styles and glyphs.

BS-Alerts

BS-Alerts is a jQuery plugin that make it easy to create jQuery event based notification bar (warning, error, success) using Twitter Bootstrap and HTML5 data- attribute.

Bootstrap 3 Dialog

Bootstrap 3 dialog is a jQuery plugin that enhances the Twitter Bootstrap’s modal component to make it more interactive, user-friendly and easy-to-implement.

metisMenu

metisMenu is a simple jQuery menu plugin for Bootstrap 3 that help you create a collapsible menu with animated accordion effects and auto collapse support.

Dropdown

dropdown is a simple jQuery plugin that make it easier to create awesome Bootstrap-style dropdowns (menus, selects, panels, tooltips etc) with additional features and no dependencies.

WebUI Popover

WebUI Popover is a powerful yet easy jQuery plugin used to extend the Bootstrap popover component with following advanced features.

Tagmanager

tagmanager is a jQuery plugin works nicely with Twitter Bootstrap that helps you manage tags for each expense users were entering.

Bootstrap Growl

Yet another jQuery notification plugin that makes use of Boostrap’s alerts to create animated informative messages in your web/app page, similar to the Mac OS X’s ‘Growl’ notification system.

Date Range Picker

A date range picker for Twitter Bootstrap for creating a dropdown menu to choose date ranges for reports, which would match the existing dropdown and button styles of Bootstrap.

Bootstrap Maxlength

Bootstrap Maxlength is a beautiful jQuery plugin that displays character counter attached to the input field and limit the maximum length as user input, using Twitter Bootstrap and html5 maxlength attribute.

TouchSpin

TouchSpin is a jQuery plugin for Bootstrap 3 to create a touch-friendly spinner widget that wraps a text input with two buttons to increment and decrement the current value.

Bootstrap Show Password

Bootstrap Show Password is a jQuery plugin that allows the visitor to toggle the password input field text visibility by clicking the toggle icon/checkbox.

Feedback_Me

Feedback_Me is a plugin for jQuery and jQuery UI that creates a customizable feedback widget on your web page that slides out from the left side of your web page when clicking the tab.

ColorBrewer

ColorBrewer is a unique color selection tool aimed at cartographers, designers, and those who work with web colors frequently. Although the purpose of the tool might seem very simple, the actual process of finding the right color for you is much deeper than just looking at a selection of colors.

ColorBrewer really gives you the maximum amount of choices for each set of colors, so you can select between different varieties of shades and hues. With the settings panel, you can configure the color map to be more/less transparent, to have solid colors only, but also to ensure that the colors you select are safe for color blind people and more.

The ColorBrewer library will help you select CB colors for your bootstrap project using a simple widget.

Mobility

Building a mobile application that people will understand how to use is the most crucial aspect of building a mobile app in the first place. Who needs an app that only does what you want to do it, customers are looking for pleasant experiences that do all of the work for them.

Mobility is an established minimal mobile development framework that uses Bootstrap in the back-end. The languages of choice within this framework are: HTML5, CSS3, and JavaScript — which means that any modern front-end developer can adapt to this framework quickly and painlessly.

There are some great features to choose from too, some of our favorites include: CSS3 transitions, fixed headers and footers, forms that are optimized for mobile devices, content tabs, a lists feature for creating lists that can scroll infinitely, notifications to keep your visitors up to date.

Sure, the list of features goes on, but what’s even important than that, is the kind of websites that developers are building using Mobility. The three most popular choices seem to be: a business homepage, a blogging platform, and also an eCommerce platform for selling products. All three type of websites can be quickly prototyped and launched using Mobility’s concise framework features.

Bootstrap Validator

When building a website with Bootstrap, you aren’t just building a grid-like website that has fancy widgets, and images attached to it. You’re building a full-scale website that has all the features that a modern website would have in any other situation.

That includes the use of Forms. Forms is what helps us to submit content through websites. We use forms to register, to login, to contact, to submit content, and so many other uses for website forms.

And because we’re using forms so frequently, we need to ensure that we’re helping our users save time, and also headaches, by validating each of the forms inputs. It’s more than likely that you yourself have been in a similar situation where you’re typing a password in two different forms, and all other form inputs get canceled once you submit the form, because your passwords didn’t match.

With a validator, this painful experience can be avoided for everyone, through the means of validating each form to check that it’s matching the previous. This library integrates with Bootstrap 3, so definitely check it out and start using it — your visitors will thank you.

Bootstrap Sortable

We already discussed one tables library. Now it’s time for another, and we truly believe this could complement the previous one greatly. Bootstrap Sortable lets you attach a jQuery library to your website that would allow visitors to sort table data according to their own preference.

This mean sorting data for ASC/DSC values, also sorting by alphabet and other common sorting values that we encounter on platforms that allow sorting through data.

Pro Range Data Slider

Just another option of a data slider that uses Bootstrap components to seamlessly integrate in a Bootstrap-built website. We hope this HTML5-ready slider will be of utmost benefit for your projects. By the looks of it, this one has slightly more fluid movements when moving the arrows up and down the data slider. We will let you decide for yourself.

Backoffice Filters

Running a complicated data set within the internal aspects of your business, and need a way to sort through data without losing out on time or performance? jQuery Backoffice Filters can help. It’s a library designed to help you sort any kind of database/website data through the use of specific filters.

The filters can be selected and set up by you, which means that you still get full control over the way data is going to appear to you. And of course, the filters could technically be applied for front-end use as well, in situations where it would be necessary for users to sort out possible matches for specific data returns; like search engines, eCommerce stores and others.

Bootstrap 3 Contact Form with Google’s reCaptcha

What would the web look like, if there were no contact forms. That’s the beauty of web. A truly necessary feature will naturally be developed by someone, and what a day it was when someone decided to create a contact form for the web. These days, contact foms have evolved beyond the basic features.

A contact form can be used to send over sensitive data, to apply for a job, to send a simple message, and so much more. The one thing that many modern contact forms lack, is the ability to protect themselves against spammers, and to best deal with spam, most professional web developers will recommend to use Google’s reCAPTCHA platform.

The basis upon which this particular library was built. A Bootstrap 3 oriented contact form that uses reCAPTCHA to protect your contact form against spammers.

Table of Contents

It’s very likely that at some point during your web browsing history, you stumbled upon a piece of content that was so big that it needed a Table of Contents. If not, then think of any book that you have read or picked up in the past, it had what’s called a Chapters page, where all the book chapters are listed.

This is also known as table of contents of the particular book. On the web, table of contents is often used to discuss documentation, but also on large pieces of content; like tutorials and guides, and this library, Tocify, is going to help you create individual content pages accompanied by a table of contents, to help your readers better engage with your content, and to help them better understand the overall structure of what you’re trying to convey.

Tocify can be optionally styled with Twitter Bootstrap or jQuery UI Themeroller, and optionally animated with jQuery show/hide effects. Tocify also optionally provides support for smooth scrolling, scroll highlighting, scroll page extending, and forward and back button support.

Grid Editor

Having a grid in the first place, is already such a huge boost to the workflow of website design, but being able to re-organize the grid using a drag and drop system, that’s pure revolutionary! Grid Editor is a Bootstrap-specific editor for rearranging the appearance of your Bootstrap grid system.

It is built in a way that’s going to let you edit the Grid content, appearance, and location through the use of traditional content management editor tools. You will not know how useful and convenient this tool truly is, until you try it on your own Bootstrap website.

jsTiles

Tiles is a unique way of displaying content. jsTiles simply helps you to “animate” your content using a Tiles template approach. The end result looks similar to a content slider, but without the sliding capability.

The content just unfolds naturally in a tile-style and adds a particular browsing experience that will be impossible to match by any other effort. Demo page uses jsTiles to show you what it is capable of.

jQuery Bootstrap Carousel Bundle

jQuery Bootstrap carousel bundle is an all in one product. You don’t need to pay extra money, but instead you can buy thumbnails carousel, multiple items carousel, testimonial carousel, carousel in modal etc in a single item. We are presenting our two highly sales products in one Package.

This product contains more than 170+ pre-built layouts of bootstrap carousel with new functions like:

Touch swipe enables

Controlled Slide Duration

Carousel with parallax effects

Text layers animation effects

Controlled slide timing functions

Different types of sliding transition effects

Form Wizard

Single page 3/4/5 step form with every step script field validation. Multi format and style 144 item Sign up form, Include image uploader system. Using bootStrap responsive and it’s easy to customize for you.

Notify

Website notifications get a lot of attention these days. Notification and popup scripts are on the rise as more website owners realize that in order to fully capture users attention, notifications will be necessary to experiment with. Popups can be annoying, but when the popups have deeper purpose, they actually make a lot of sense to use.

A good example is a contact form, a notification can be created to alert the user after a successful submission, or a notification can be used to alert the user when there’s an error in their profile.

The uses for notifications are many, and the Bootstrap Notify library takes Alerts to the next level. A custom settings platform is available to select different settings for creating the perfect notification that’s going to capture your visitors attention.

Bootstrap Multiselect

We are still actively exploring libraries that help us to manipulate our forms. Forms are a big deal, and this library shows. Bootstrap Multiselect lets us create specific forms actions that would allow us to select multiple choices within a form. A very handy library that could come in handy for situations where a user needs to select the quantity of something, but also in different variations.

Or select between styles where multiple style options are present, needless to say — job application process forms could also benefit from this library, because applicants are often presented with questions that require multiple answer choices and sometimes there’s the need to select multiple answers to better portray the user’s proficiency.

Bootstrap Tags Input

For bloggers, tags are an essential method for managing the different varieties of content. Tags help to point out to content that’s in relation to what they are already exploring, and users love to explore more of what they already have liked.

Tags also help to organize a website in a way that specific content is nested underneath similar pages. This jQuery library is uses the Bootstrap UI to help you manage your tags.

jQuery Bootgrid

jQuery Bootgrid has been built to help Bootstrap users better organize their dynamic forms content. Within a single click of a button, you can completely transform the appearance of a particular dynamic forms widget to look like a modern state of the art solution that will wow your users, and leave a lasting impression.

Bootstrap FileStyle

We wrote about jQuery file upload scripts in recent past, a successful post that has already generated a high volume of response, and goes to show how trending the current market for file upload related content is. Then again, it makes complete sense as the big names in Cloud Computing are battling against each other for new customers, namely Google, Microsoft, Amazon, and Apple.

Bootstrap FileStyle will let you custom-style your file upload input forms with the Bootstrap framework UI. It’s time to give your file upload pages a little makeover.

RSS Widget

RSS feeds are still some of the most popular ways of consuming content on the go. The process of checking each website that we read individually, for new content, can be so time consuming and boring that we quickly run out of patience, and that’s where RSS feeds come in really handy.

The following script is for aligning together both jQuery and Bootstrap to create a unique RSS feed fetching experience for your website. Simply attached the library and specify the location using a jQuery call and you’re all set. You can set up as many feeds as you like.

Power Table

Welcome to power table! A full-fledged solution to creating HTML5 tables using jQuery, and Bootstrap.

The tables that you can create with this library provide many great benefits and uses, some of them are: you can add a custom search form for all tables, you can create a sort content option to allow users to organize content, you can allow users to scroll through content by using pagination, and many other design/database related features to create truly powerful tables.

DMSS

Say hello to DMSS — a personal jQuery built and Bootstrap supported style switcher for websites. Now, the product is aimed at any webmaster, but particularly web designers who are keen to display their final work in a variety of styles.

It doesn’t help to create just one single style, and then re-do another style and have the user view that. Instead, a much more flexible choice would be to program/code the design in a way where the style switcher would allow to quickly change the overall appearance of the website’s style.

That’s the kind of library you are looking at here. A simple widget will be added to your website to allow users to completely change up the appearance of the style that they are viewing, based on your own recommendations.

TimelinzJS

Facebook really did revolutionize timelines. Now, timelines can be found everywhere, but most frequently on website designs that have some sort of a connection with events. When displaying the events calendar, it’s much more convenient to use a timeline of the daily schedule to display the kind of speakers/activities that users can expect for the day.

This is what TimelinzJS is trying to achieve, it’s giving you the opportunity to create unique timelines that you can use to discuss important business events, or to showcase your schedule availability. The uses are unlimited, and we look forward to seeing what you are able to create with this very unique jQuery library.

If you liked this article about jQuery Bootstrap plugins, you should check out these as well:

jQuery Lightbox Plugins (19 Examples)

jQuery Gallery Plugins For Showcasing Images Better

A Collection Of jQuery Maps Plugins

The Best jQuery Or Javascript Carousel Plugins

The post jQuery Bootstrap Plugins (51 Great Examples) appeared first on Design your way.

from Web Development & Designing http://www.designyourway.net/blog/resources/jquery-bootstrap-plugins/

0 notes

t-baba · 5 years ago

Photo

12 Best Contact Form PHP Scripts for 2020

Contact forms are a must have for every website. They encourage your site visitors to engage with you while potentially lowering the amount of spam you get.

For businesses, this engagement with visitors increases the chances of turning them into clients or customers and thus increasing revenue.

If you're looking for an easy and cost-effective contact form PHP script, read on!

Why You Need a Form on Your Website

The good news is that forms are also easy to add to any website and can be customized to match your brand. Plus, they act as a security measure against spammers and bots.

The Best Contact Form PHP Scripts on CodeCanyon in 2020

CodeCanyon features over 200 Form PHP Scripts that you can purchase today. Below are some of the popular and best-selling PHP form scripts at the CodeCanyon library.

Some of the features you are guaranteed to get from these PHP contact form scripts include:

multiple file upload

ability to design any form

beautiful pre-designed templates

notifications

Ajax-enabled submission and validation

CAPTCHA options such as Google reCAPTCHA, Honeypot, etc

auto emailing

responsive design

form validation

12 Best Contact Form PHP Scripts at CodeCanyon

1. Quform: Responsive AJAX Contact Form

Quform is a versatile AJAX contact form that can be adapted to be a registration form, quote form, or any other form needed. It even has the option to save data to a database.

Best features:

three ready-to-use themes with six variations

ability to integrate into your theme design

ability to create complex form layouts

file uploads supported

and more

With tons of other customizations available, Quform: Responsive AJAX Contact Form is bound to keep the most discerning user happy.

2. PHP Form Builder

A CodeCanyon top seller, PHP Form Builder includes the jQuery live validation plugin. It enables you to build any form, and connect a database to insert, update, or delete records. It also allows you to send your emails using customizable HTML/CSS templates.

Best features:

over 50 pre-built templates included

highly customizable layout

accepts any HTML5 form elements

default options ready for Bootstrap 4

email sending with advanced options

Material Design and Foundation forms

and more

With loads of options for creating a variety of elegant contact forms and extensive documentation to help you on your way, PHP Form Builder is a top choice for PHP site owners.

3. Easy Forms: Advanced Form Builder and Manager

Easy Forms features an advanced drag-and-drop PHP form builder that lets you design and develop forms quickly without any coding or programming skills. It also features amazing themes and templates and the ability to send instant notifications. Easy Forms also include form analytics dashboard where you get to see an overview of form statistics, including conversions.

Other features include:

multi-language support

double opt-in for users

password protected forms

ability to export data

submission reports

advanced field validation

auto-responder and email notifications

4. Just Forms Full Version

Other features include:

fully responsive

social icons and buttons

120+ AJAX PHP forms with client-side and server-side validation

100+ ready to use templates

ability to export data to a CSV file and PDF document

ability to save data to a database

PHP CAPTCHA

protection against XSS, CSRF, and SQL injection attacks

jQuery enhancements such as date picker, date and time picker, color picker, numeric stepper, sliders and many more

5. Ultimate PHP, HTML5 and AJAX Contact Form

The Ultimate PHP form script lets you create an AJAX-based contact form with built-in Google ReCaptcha to protect against spam robots. It also lets you create custom fields, mandatory fields as well as add multiple validations on custom fields. This system also supports file uploads for formats such as PNG, MS Word, and others.

Some of its best features include:

easy to install and mobile-friendly

SMTP authentication for user verification

custom thank you messages

AJAX-enabled (no page reloads for validation)

CSS animations

cross-site scripting (XSS) attack prevention

6. ContactMe: Responsive AJAX Contact Form

ContactMe is another bestseller that is extremely customizable and allows site owners to create different versions of contact forms to fit their needs. Besides, it is fully responsive and mobile-friendly. If you are looking for some inspiration, it features 28 combinations of ready-to-use forms and seven concrete examples to spark your creativity.

This is a script to consider for your next project.

Best features:

beautiful themes

easy to install

no database required

file attachment supported

secure

ability to set different language messages for each form

7.Zigaform PHP Form Builder: Contact and Survey

If you are looking for a universal PHP form builder, Zigaform is the right script for the job. It can be integrated with including Joomla, Magento, Prestashop, and any other PHP website. It lets you organize your form elements with a grid system and even enables you to assign conditional logic to your forms. When it comes to customizations, you are spoilt for choice as Zigaform comes with 42+ elements, over 650 fonts 769+ font icons ensuring your forms are as attractive as your needs.

Other features include:

ability to filter and search submitted data

graphic charts of submitted data

notification email for users

file upload support

export form data to CSV and PDF

AJAX powered

spam protection

Zigaform is the perfect script to create a contact form for any website.

8. Universal Form Builder

Universal Form Builder is easy to use and can be integrated into any website, including Joomla, Magento, Opencart, and so on. It is the perfect script to build your forms in seconds with the aid of a drag and drop system. It also lets you change the appearance of any element, thus ensuring your forms are consistent with your website theme.

Main features include:

multi-language support

fully responsive design

full skin customizer

background images

live preview during customizing

support for all browsers including older versions of Internet Explorer

form and visits statistics

9. Multi-Purpose Form Generator

Just like the name suggests, Multipurpose Form Generator is an advanced web application that provides an easy drag and drop interface to build simple as well as complex forms in matters of seconds. It also includes the ability to integrate your forms with Google reCaptcha to prevent spam submissions and bots

Other features include:

ability to export form data

customizations according to your needs

Ajax-enabled forms

5+ different types of validation support

file upload support

preview forms before publishing

fully responsive

10. Multi-Step Form

Main features:

no database required

attractive design

popup alert for validation errors

file attachment support

calendar date picker

security guaranteed

multi-language support

11. KONTAKTO: AJAX Contact Form with Styled Map

KONTAKTO has only been around for a few years, but has already won a name for itself as one of the top-rated scripts in this category. The standout feature of this beautifully designed contact form is the stylish map with location pin that comes integrated into the form.

Best features:

required field validation

anti-spam with simple CAPTCHA math

defaults to PHP mail but an SMTP option is available

repeat submission prevention

and more

Simple yet stylish, the KONTAKTO: AJAX Contact Form With Styled Map can be easily integrated with your HTML or PHP page and will be a fast favorite with many PHP site owners.

12. ContactPLUS+ PHP Contact Form

ContactPlus+ is another clean and simple contact form. It comes in three styles: a blank slate, un-styled version that you can build to suit your taste, a normal form with just the essential information needed on a contact form, and a longer form to accommodate an address.

Best features:

CAPTCHA verification

successful submission message

two styled and one unstyled version

and more

If you’re looking for a clean and simple contact form that will integrate easily on your PHP website, ContactPLUS+ PHP Contact Form is the one for you.

The Best PHP Scripts on CodeCanyon

Explore thousands of the best and most useful PHP scripts ever created on CodeCanyon. With a low-cost one time payment, you can purchase these high-quality WordPress themes and improve your website experience for you and your visitors.

Here are a few of the best-selling and up-and-coming PHP scripts available on CodeCanyon for 2020.

PHP

14 Best PHP Event Calendar and Booking Scripts

Kyle Sloka-Frey

PHP

10 Best PHP URL Shortener Scripts

Monty Shokeen

PHP

12 Best Contact Form PHP Scripts for 2020

Esther Vaati

PHP

Comparing the 5 Best PHP Form Builders

Nona Blackman

PHP

Create Beautiful Forms With PHP Form Builder

Ashraff Hathibelagal

by Esther Vaati via Envato Tuts+ Code https://ift.tt/2IkrqNM

#CSS3 #HTML5 Branding #HTML5 Weekly #HTMLl5 demos #Javascript #Javascript Branding #Javascript Weekly

0 notes

programmingbiters-blog · 7 years ago

Photo

New Post has been published on https://programmingbiters.com/codeigniter-3-crudcreate-read-update-and-delete-using-jquery-ajax-bootstrap-models-and-mysql/

Codeigniter 3 - CRUD(Create, Read, Update and Delete) using JQuery Ajax, Bootstrap, Models and MySQL

CRUD is a basic step of any Core Language or framework. CRUD stand for Create Read Update and Delete. So in this post we will learn insert update delete in codeigniter using jquery Ajax. I gave you example from scratch so if you don’t know about Codeigniter 3 then no issue. You have to just follow simple step.There are listed bellow step you have to follow:

1)Download Fresh Codeigniter 3

2)Create Database and Configuration

3)Add Route

4)Create Controller

5)Update View

6)Create JS File

In this example i used several jquery Plugin for fire Ajax, Ajax pagination, Bootstrap, Bootstrap Validation, notification as listed bellow.

Jquery

Bootstrap

twbsPagination js

Validator JS(Bootstrap form validation example with demo using validator.js plugin)

toastr JS(Jquery notification popup box example using toastr JS plugin with demo)

After complete this c.r.u.d. application example you will be find preview as like bellow preview scheenshot:

Preview:

Step 1: Download Fresh Codeigniter 3

In First step we will download fresh version of Codeigniter 3, so if you haven’t download yet then download from here : Download Codeigniter 3.

After Download successfully, extract clean new Codeigniter 3 application.

Step 2: Create Database and Configuration

In this step we will create new database “test” and add new table “items” in test database. You can use following SQL Query for create “items” table. So let’s create using bellow sql query:

item table:

CREATE TABLE IF NOT EXISTS `items` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `description` text COLLATE utf8_unicode_ci NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=16 ;

After create database and table successfully, we have to configuration of database in our Codeigniter 3 application, so open database.php file and add your database name, username and password.

application/config/database.php

<?php defined('BASEPATH') OR exit('No direct script access allowed'); $active_group = 'default'; $query_builder = TRUE; $db['default'] = array( 'dsn' => '', 'hostname' => 'localhost', 'username' => 'root', 'password' => 'root', 'database' => 'test', 'dbdriver' => 'mysqli', 'dbprefix' => '', 'pconnect' => FALSE, 'db_debug' => (ENVIRONMENT !== 'production'), 'cache_on' => FALSE, 'cachedir' => '', 'char_set' => 'utf8', 'dbcollat' => 'utf8_general_ci', 'swap_pre' => '', 'encrypt' => FALSE, 'compress' => FALSE, 'stricton' => FALSE, 'failover' => array(), 'save_queries' => TRUE );

Step 3: Add Route

In this step you have to add some route in your route file. So first we will create route for items modules for lists, create, edit, update and delete.so put the bellow content in route file:

application/config/routes.php

<?php defined('BASEPATH') OR exit('No direct script access allowed'); $route['default_controller'] = 'welcome'; $route['404_override'] = ''; $route['translate_uri_dashes'] = FALSE; $route['items'] = "items/index"; $route['itemsCreate']['post'] = "items/store"; $route['itemsEdit/(:any)'] = "items/edit/$1"; $route['itemsUpdate/(:any)']['put'] = "items/update/$1"; $route['itemsDelete/(:any)']['delete'] = "items/delete/$1";

Step 4: Create Controller

Ok, now first we have to create one new controller api method listing, create, edit, update and delete. so create Items.php file in this path application/controllers/Items.php and put bellow code in this file:

application/controllers/Items.php

<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Items extends CI_Controller /** * Get All Data from this method. * * @return Response */ public function index() $this->load->database(); if(!empty($this->input->get("search"))) $this->db->like('title', $this->input->get("search")); $this->db->or_like('description', $this->input->get("search")); $this->db->limit(5, ($this->input->get("page",1) - 1) * 5); $query = $this->db->get("items"); $data['data'] = $query->result(); $data['total'] = $this->db->count_all("items"); echo json_encode($data); /** * Store Data from this method. * * @return Response */ public function store() $this->load->database(); $insert = $this->input->post(); $this->db->insert('items', $insert); $id = $this->db->insert_id(); $q = $this->db->get_where('items', array('id' => $id)); echo json_encode($q->row()); /** * Edit Data from this method. * * @return Response */ public function edit($id) $this->load->database(); $q = $this->db->get_where('items', array('id' => $id)); echo json_encode($q->row()); /** * Update Data from this method. * * @return Response */ public function update($id) $this->load->database(); $insert = $this->input->post(); $this->db->where('id', $id); $this->db->update('items', $insert); $q = $this->db->get_where('items', array('id' => $id)); echo json_encode($insert); /** * Delete Data from this method. * * @return Response */ public function delete($id) $this->load->database(); $this->db->where('id', $id); $this->db->delete('items'); echo json_encode(['success'=>true]);

Step 5: Update View

In this step we will update view file of welcome_message.php. In this file we will write code of insert update delete and also include bootstrap, jquery, toastr and twbsPagination. So let’s update following file:

application/views/welcome_message.php

<!DOCTYPE html> <html> <head> <title>Codeigniter 3 - Ajax CRUD Example</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12 margin-tb"> <div class="pull-left"> <h2>Codeigniter 3 - Ajax CRUD Example</h2> </div> <div class="pull-right"> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#create-item"> Create Item</button> </div> </div> </div> <table class="table table-bordered"> <thead> <tr> <th>Title</th> <th>Description</th> <th width="200px">Action</th> </tr> </thead> <tbody> </tbody> </table> <ul id="pagination" class="pagination-sm"></ul>  <div class="modal fade" id="create-item" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Create Item</h4> </div> <div class="modal-body"> <form data-toggle="validator" action="items/store" method="POST"> <div class="form-group"> <label class="control-label" for="title">Title:</label> <input type="text" name="title" class="form-control" data-error="Please enter title." required /> <div class="help-block with-errors"></div> </div> <div class="form-group"> <label class="control-label" for="title">Description:</label> <textarea name="description" class="form-control" data-error="Please enter description." required></textarea> <div class="help-block with-errors"></div> </div> <div class="form-group"> <button type="submit" class="btn crud-submit btn-success">Submit</button> </div> </form> </div> </div> </div> </div>  <div class="modal fade" id="edit-item" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Edit Item</h4> </div> <div class="modal-body"> <form data-toggle="validator" action="" method="put"> <div class="form-group"> <label class="control-label" for="title">Title:</label> <input type="text" name="title" class="form-control" data-error="Please enter title." required /> <div class="help-block with-errors"></div> </div> <div class="form-group"> <label class="control-label" for="title">Description:</label> <textarea name="description" class="form-control" data-error="Please enter description." required></textarea> <div class="help-block with-errors"></div> </div> <div class="form-group"> <button type="submit" class="btn btn-success crud-submit-edit">Submit</button> </div> </form> </div> </div> </div> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.3.1/jquery.twbsPagination.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"> <script type="text/javascript"> var url = "items"; </script> <script src="http://itsolutionstuff.com/js/item-ajax.js"></script> </body> </html>

Step 6: Create JS File

In this last step we will make new folder js on your root directory and create new file item-ajax.js on that folder. In item-ajax.js file we write all code of CRUD JS that will manage listing, insert, update, delete and pagination. So let’s create new file and put following code:

js/item-ajax.js

var page = 1; var current_page = 1; var total_page = 0; var is_ajax_fire = 0; manageData(); /* manage data list */ function manageData() $.ajax( dataType: 'json', url: url, data: page:page ).done(function(data) total_page = data.total % 5; current_page = page; $('#pagination').twbsPagination( totalPages: total_page, visiblePages: current_page, onPageClick: function (event, pageL) page = pageL; if(is_ajax_fire != 0) getPageData(); ); manageRow(data.data); is_ajax_fire = 1; ); /* Get Page Data*/ function getPageData() $.ajax( dataType: 'json', url: url, data: page:page ).done(function(data) manageRow(data.data); ); /* Add new Item table row */ function manageRow(data) var rows = ''; $.each( data, function( key, value ) rows = rows + '<tr>'; rows = rows + '<td>'+value.title+'</td>'; rows = rows + '<td>'+value.description+'</td>'; rows = rows + '<td data-id="'+value.id+'">'; rows = rows + '<button data-toggle="modal" data-target="#edit-item" class="btn btn-primary edit-item">Edit</button> '; rows = rows + '<button class="btn btn-danger remove-item">Delete</button>'; rows = rows + '</td>'; rows = rows + '</tr>'; ); $("tbody").html(rows); /* Create new Item */ $(".crud-submit").click(function(e) e.preventDefault(); var form_action = $("#create-item").find("form").attr("action"); var title = $("#create-item").find("input[name='title']").val(); var description = $("#create-item").find("textarea[name='description']").val(); $.ajax( dataType: 'json', type:'POST', url: form_action, data:title:title, description:description ).done(function(data) getPageData(); $(".modal").modal('hide'); toastr.success('Item Created Successfully.', 'Success Alert', timeOut: 5000); ); ); /* Remove Item */ $("body").on("click",".remove-item",function() var id = $(this).parent("td").data('id'); var c_obj = $(this).parents("tr"); $.ajax( dataType: 'json', type:'delete', url: url + '/' + id, ).done(function(data) c_obj.remove(); toastr.success('Item Deleted Successfully.', 'Success Alert', timeOut: 5000); getPageData(); ); ); /* Edit Item */ $("body").on("click",".edit-item",function() var id = $(this).parent("td").data('id'); var title = $(this).parent("td").prev("td").prev("td").text(); var description = $(this).parent("td").prev("td").text(); $("#edit-item").find("input[name='title']").val(title); $("#edit-item").find("textarea[name='description']").val(description); $("#edit-item").find("form").attr("action",url + '/update/' + id); ); /* Updated new Item */ $(".crud-submit-edit").click(function(e) e.preventDefault(); var form_action = $("#edit-item").find("form").attr("action"); var title = $("#edit-item").find("input[name='title']").val(); var description = $("#edit-item").find("textarea[name='description']").val(); $.ajax( dataType: 'json', type:'POST', url: form_action, data:title:title, description:description ).done(function(data) getPageData(); $(".modal").modal('hide'); toastr.success('Item Updated Successfully.', 'Success Alert', timeOut: 5000); ); );

Ok, now we are ready to run our CRUD Application example. So let’s run bellow command on your root directory for quick run:

php -S localhost:8000

Now you can open bellow URL on your browser:

http://localhost:8000/

قالب وردپرس

0 notes

josephkchoi · 7 years ago

Text

25 Things You Can Do With Unbounce that Your UX/Web Team Will Love

If you read the opening post of Product Marketing Month, you would have read about the concept of Productizing Our Technology (POT).

If you look at the table below, notice how product #1 is a standalone landing page used primarily for paid ad campaigns, but products #2 and #3 are designed to be used primarily on your website.

Note: that for the personas listed, these are intentionally general, as it’s still part of our discovery. My goal is simply to show that they are most likely different.

A WTF Moment – How Could We Be So Blind?

When we talked to our customers and community members, we uncovered a startling fact: most people thought that the new products could only be used on Unbounce landing pages.

WUUUUTTTT! Not true.

Who uses your products?

As I explore these use cases, try to follow along with your own products, to see if there are ways that you can create new mini products from the technology you possess.

(Click image for full-size view)

To recap, each mini product is labelled as either NOW/MVP/NEW depending on how easy it is to create with our current tech:

The core technology is denoted as LP (Landing Pages), POP (Popups), SB (Sticky Bars).

In the table below you’ll find 25 of the ideas we came up with — that I selected from of a total of 121.

How can you target different functional users?

Approach 1: Product Pages for Organic & Paid Traffic

Approach 2: Cross-Function Advocate Email Marketing

Prioritizing Product Development

How many new products could YOU build?

Now, everybody POT! Cheers Oli Gardner

p.s. Tell your web/UX teammates about this blog post :D

25 Things You Can Do With Unbounce that Your UX/Web Team Will Love published first on https://nickpontemrktg.wordpress.com/

0 notes